/* Match the project's Material Design 3 CS2 Rosé theme */

:root {
  /* Light mode overrides */
  --md-primary-fg-color: hsl(336, 47%, 57%);        /* Rosé pink for light mode (#C65C82) */
  --md-primary-fg-color--light: hsl(334, 84%, 68%); /* #F07BA6 */
  --md-primary-fg-color--dark: hsl(336, 37%, 30%);  /* #6B2F45 */
  --md-accent-fg-color: hsl(334, 84%, 68%);         /* Bright rosé pink for accents (#F07BA6) */
  --md-typeset-a-color: hsl(334, 84%, 68%);         /* Links use accent rosé in light mode (#F07BA6) */
}

[data-md-color-scheme="slate"] {
  /* Dark mode */

  /* Header/Navbar - dark rosé-tinted background */
  --md-primary-fg-color: hsl(330, 26%, 8%);         /* Dark rosé-tinted background (#1A1014) */
  --md-primary-fg-color--light: hsl(334, 71%, 89%); /* #FAD6E4 */
  --md-primary-fg-color--dark: hsl(250, 7%, 5%) ;   /* #0D0D0F */
  --md-primary-bg-color: hsl(289, 20%, 90%);        /* #E6E1E5 */

  /* Accent - bright rosé for links, buttons, active states */
  --md-accent-fg-color: hsl(334, 84%, 68%);         /* Rosé primary - same as frontend (#F07BA6) */
  --md-accent-fg-color--transparent: hsla(334, 84%, 68%, 0.1);

  /* Background colors with rosé hue */
  --md-default-bg-color: hsl(330, 26%, 8%);         /* Rosé-tinted dark background (#1A1014) */
  --md-default-fg-color: hsl(289, 20%, 90%);        /* Text primary (#E6E1E5) */
  --md-default-fg-color--light: hsl(270, 15%, 76%); /* Text secondary (#CAC4D0) */

  /* Code block colors with rosé hue */
  --md-code-bg-color: hsl(330, 24%, 14%);           /* Rosé-tinted code background (#2A1820) */
  --md-code-fg-color: hsl(289, 20%, 90%);           /* #E6E1E5 */

  /* Links - use bright rosé */
  --md-typeset-a-color: hsl(334, 84%, 68%);         /* #F07BA6 */

  /* Table of contents active item */
  --md-typeset-table-color: hsl(330, 24%, 14%);     /* #2A1820 */
}

/* Enhanced rosé highlights for dark mode */
[data-md-color-scheme="slate"] {
  /* Sidebar active nav item */
  .md-nav__link--active {
    color: hsl(334, 84%, 68%) !important; /* #F07BA6 */
  }

  /* Hover states */
  .md-nav__link:hover {
    color: hsl(334, 71%, 89%) !important; /* #FAD6E4 */
  }

  /* Search highlights */
  .md-search-result__meta {
    background-color: hsl(330, 24%, 14%);
  }

  /* Admonition headers */
  .md-typeset .admonition-title {
    background-color: hsla(334, 84%, 68%, 0.1);
  }
}

/* Rounded corners and colors to match project */
.md-button {
  border-radius: 44px !important;        /* Match project button radius */
}

/* Primary button - filled rosé */
.md-button--primary {
  background-color: hsl(336, 47%, 57%) !important; /* #C65C82 */
  color: white !important;
  border-color: hsl(336, 47%, 57%) !important;     /* #C65C82 */
}

.md-button--primary:hover {
  background-color: hsl(332, 55%, 65%) !important; /* #D67296 */
  border-color: hsl(332, 55%, 65%) !important;     /* #D67296 */
}

[data-md-color-scheme="slate"] .md-button--primary {
  background-color: hsl(334, 84%, 68%) !important; /* #F07BA6 */
  color: hsl(330, 26%, 8%) !important;             /* #1A1014 */
  border-color: hsl(334, 84%, 68%) !important;     /* #F07BA6 */
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
  background-color: transparent !important;
  color: hsl(334, 84%, 68%) !important;            /* #F07BA6 */
  border-color: hsl(334, 84%, 68%) !important;     /* #F07BA6 */
}

/* Secondary button - outlined rosé */
.md-button:not(.md-button--primary) {
  color: hsl(336, 47%, 57%) !important;            /* #C65C82 */
  border-color: hsl(336, 47%, 57%) !important;     /* #C65C82 */
}

.md-button:not(.md-button--primary):hover {
  background-color: hsla(334, 84%, 68%, 0.1) !important;
  border-color: hsl(332, 55%, 65%) !important;     /* #D67296 */
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) {
  color: hsl(334, 84%, 68%) !important;            /* #F07BA6 */
  border-color: hsl(334, 84%, 68%) !important;     /* #F07BA6 */
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary):hover {
  background-color: hsla(334, 84%, 68%, 0.1) !important;
  border-color: hsl(334, 71%, 89%) !important;     /* #FAD6E4 */
}

/* Additional rosé-tinted backgrounds */
[data-md-color-scheme="slate"] .md-header {
  background-color: hsl(330, 26%, 8%);             /* #1A1014 */
}

/* Logo styling */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
}

/* Clean separator between header and content */
[data-md-color-scheme="slate"] .md-header {
  box-shadow: 0 0 0.2rem rgba(0,0,0,.1), 0 0.2rem 0.4rem rgba(0,0,0,.2);
}

/* Improve sidebar appearance */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: transparent;
}

/* Better content cards */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border: none;
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.05), 0 0 0.05rem rgba(0,0,0,.1);
}

/* Tabs styling */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: hsl(330, 26%, 8%);             /* #1A1014 */
  border-bottom: 0.05rem solid hsla(334, 84%, 68%, 0.1);
}

/* Code blocks with subtle borders */
[data-md-color-scheme="slate"] .md-typeset pre > code {
  border-radius: 0.5rem;
}

/* Navigation path breadcrumbs */
[data-md-color-scheme="slate"] .md-path {
  color: hsl(270, 15%, 76%);                       /* #CAC4D0 */
}

/* Admonition styling to match mkdocs-material style */
/* Border-left style like the reference documentation */
.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-left-width: 4px;
}

/* Only content links (markdown content) use accent color - exclude nav, buttons, etc. */
.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-header__button):not(.md-footer__link):not(.md-search-result__link) {
  color: hsl(334, 84%, 68%) !important;            /* #F07BA6 */
}

.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-header__button):not(.md-footer__link):not(.md-search-result__link):hover {
  color: hsl(334, 84%, 68%) !important;            /* #F07BA6 */
  opacity: 0.8;
}