/* -----------------------------
   Your brand tokens (global)
------------------------------ */
:root,
html {
  /* Brand palette */
  --primary-color: #eb5d40;
  --primary-dark-color: #eb5d40;
  --primary-light-color: #d4baa7;
  --primary-lighter-color: #cae1f1;
  --primary-lightest-color: #e9f1f8;
  /* Base */
  --page-background-color: white;
  --page-foreground-color: #110f0d;
  --page-secondary-foreground-color: #67727e;

  /* Layout scales */
  --border-radius-large: 22px;
  --border-radius-medium: 14px;
  --border-radius-small: 9px;
  --spacing-small: 8px;
  --spacing-medium: 14px;
  --spacing-large: 19px;
  --top-height: 125px;

  /* UI areas */
  --side-nav-background: #d4baa7;
  --side-nav-foreground: #F1FDFF;
  --searchbar-background: var(--side-nav-foreground);
  --searchbar-border-radius: var(--border-radius-medium);
  --header-background: #d4a7a7;
  --header-foreground: black;

  --toc-background: transparent;
  --toc-foreground: var(--page-foreground-color);
}

/* -----------------------------
   DARK mode (scheme: slate)
------------------------------ */
[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --md-primary-fg-color: #eb5d40;
  --md-primary-fg-color--light: #eb5d40;
  --md-primary-fg-color--dark: #eb5d40;
  --md-accent-fg-color: #eb5d40; /* or your dark accent */

  --md-default-bg-color: #1C1D1F;
  --md-default-fg-color: #d2dbde;
  --md-typeset-color: #d2dbde;

  --md-code-bg-color: #191a1c;
  --md-code-fg-color: #d2dbde;

  /* Header */
  .md-header, .md-tabs {
    background-color: #eb5d40;
    color: white;
  }

  /* Primary sidebar (nav) */
  .md-sidebar--primary {
    color: #d2dbde;
  }
  .md-nav, .md-nav__title, .md-nav__link {
    color: #d2dbde;
  }

  /* Secondary sidebar (TOC) */
  .md-sidebar--secondary {
    color: #d2dbde;
  }

  /* Search */
  .md-search__form {
    background: var(--md-default-bg-color);
    border-radius: var(--searchbar-border-radius);
  }
}

/* -----------------------------
   Optional: rounded cards, chips, etc.
------------------------------ */
.md-card {
  border-radius: var(--border-radius-large);
}
.md-tag, .md-button {
  border-radius: var(--border-radius-small);
}



  
  /* DARK */
  [data-md-color-scheme="slate"] {
    --md-primary-fg-color: #eb5d40;
    --md-accent-fg-color: #eb5d40; /* <- stop the violet */
    .md-header, .md-tabs { background-color: #eb5d40 !important; color: white; }
  }
  

  /* Force our colors no matter what loads first */
:root {
    --md-primary-fg-color: #eb5d40 !important;
    --md-accent-fg-color: #eb5d40 !important;
  }
  
  /* Explicit per-scheme overrides (stronger selectors) */
  html[data-md-color-scheme="default"],
  html[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #eb5d40 !important;
    --md-accent-fg-color: #eb5d40 !important;
  }
  
  /* If the header is still purple, hard-set its bg as a smoke test */
  html .md-header, html .md-tabs {
    background-color: #2e1c45 !important;  /* your dark header */
    color: #fff !important;
  }
  
/* Headings use brand primary */
:root {
  --nw-heading-color: var(--primary-color);
}

/* MkDocs Material content headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--nw-heading-color) !important;
}

/* Optional: keep headings brand-colored even for inline code inside headings */


/* Light mode */
:root {
  --md-admonition-fg-color: var(--primary-color);
  --md-admonition-bg-color: var(--primary-lightest-color);
}
/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-admonition-fg-color: var(--primary-color);
  --md-admonition-bg-color: rgba(235, 93, 64, 0.12);
}
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--border-radius-medium);
  border-left: 5px solid var(--primary-color);
  background-color: var(--md-admonition-bg-color);
}


.md-typeset .admonition-title,
.md-typeset summary {
  font-size: 1.2em;
  font-weight: 900;
  color: var(--primary-color);
  background-color: color-mix(
    in srgb,
    var(--primary-color) 12%,
    transparent
  );
  border-radius: calc(var(--border-radius-medium) - 2px)
                 calc(var(--border-radius-medium) - 2px)
                 0 0;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  color: var(--primary-color);
}
.md-typeset .admonition.note {
  border-left-color: var(--primary-color);
  background-color: var(--md-admonition-bg-color);
}

.md-typeset .admonition.note > .admonition-title::before {
  color: var(--primary-color);
}

/* Force ALL admonition types (note, important, info, etc.) to use brand color */
.md-typeset .admonition,
.md-typeset details.admonition {
  --md-admonition-border-color: var(--primary-color) !important;
  --md-admonition-icon-color: var(--primary-color) !important;
  --md-admonition-title-color: var(--primary-color) !important;

  border-left-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important; /* fixes the blue outline */
}

/* Also fix the icon/emoji circle + glyph */
.md-typeset .admonition-title::before,
.md-typeset details.admonition > summary::before {
  color: var(--primary-color) !important;
  background-color: color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
}

/* If the blue appears only when expandable (details) is open/focused */
.md-typeset details.admonition[open],
.md-typeset details.admonition:focus-within {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.05rem var(--primary-color) !important;
}

/* -----------------------------
   DARK mode background override
------------------------------ */
html[data-md-color-scheme="slate"] {
  --md-default-bg-color: #171b18;
  --md-default-fg-color: #ffffff;
  --md-typeset-color: #ffffff;

  --md-code-bg-color: rgba(0, 0, 0, 0.2);
  --md-code-fg-color: #ffffff;
}