:root {
  /* Primary colors */
  --md-primary-fg-color: #000B32;
  --md-primary-fg-color--light: #494F70;
  --md-primary-fg-color--dark: #000514;
  --md-primary-bg-color: #E0E1E5;
  --md-primary-bg-color--light: #FFFFFF;

  /* Background colors for light mode */
  --md-default-bg-color: #D8D8D8;  /* Softer white background */
}

[data-md-color-scheme="default"] {
  /* Light mode specific colors */
  --md-typeset-a-color: #3224FF; /* Default hyperlink color (not pink) */
  --md-nav-link-color: #E0E1E5;

  /* Table of contents and navigation colors */
  .md-nav__link {
    color: #000B32 !important;
  }

  .md-nav__link:hover {
    color: #DD1654 !important;
  }

  /* Remove underline from links */
  .md-typeset a {
    text-decoration: none;
    border-bottom: none;
  }

  .md-typeset a:hover {
    color: #DD1654; /* Keep pink on hover */
    background-color: transparent;
  }
}

[data-md-color-scheme="slate"] {
  /* Dark mode specific colors */
  --md-default-bg-color: #061145;
  --md-default-fg-color: #E0E1E5;
  --md-typeset-a-color: #A1B4FF; /* Default hyperlink color (not blue) */

  .md-nav__link {
    color: #E0E1E5 !important;
  }

  .md-nav__link:hover {
    color: #DD1654 !important;
  }

  /* Remove underline from links */
  .md-typeset a {
    text-decoration: none;
    border-bottom: none;
  }

  .md-typeset a:hover {
    color: #DD1654; /* Keep pink on hover */
    background-color: transparent;
  }
}

/* Import Red Hat Display font */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&display=swap');

/* Additional customization for better readability */
.md-typeset {
  font-size: 0.75rem;
  line-height: 1.6;
}