/* ============================================================================
   Graphite & Ember — MkDocs Material theme overrides
   ----------------------------------------------------------------------------
   Maps the brand tokens onto Material's CSS variables. Dark-only.
   Place at:  docs/stylesheets/extra.css
   ============================================================================ */

/* ---------- Color tokens -------------------------------------------------- */

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {

  /* Graphite — backgrounds */
  --md-default-bg-color:           oklch(0.10 0.003 250);   /* base */
  --md-default-bg-color--light:    oklch(0.14 0.003 250);   /* surface */
  --md-default-bg-color--lighter:  oklch(0.18 0.004 250);   /* elevated */
  --md-default-bg-color--lightest: oklch(0.24 0.005 250);   /* overlay */

  /* Graphite — foreground / text */
  --md-default-fg-color:           oklch(0.96 0.003 250);   /* primary */
  --md-default-fg-color--light:    oklch(0.76 0.004 250);   /* secondary */
  --md-default-fg-color--lighter:  oklch(0.58 0.005 250);   /* muted */
  --md-default-fg-color--lightest: oklch(0.42 0.004 250);   /* disabled */

  --md-typeset-color:    oklch(0.96 0.003 250);
  --md-typeset-a-color:  oklch(0.78 0.17 60);                /* accent links */

  /* Code */
  --md-code-bg-color:  oklch(0.14 0.003 250);
  --md-code-fg-color:  oklch(0.96 0.003 250);

  /* Header / nav strip — sits on the surface step, not the base */
  --md-primary-fg-color:        oklch(0.14 0.003 250);
  --md-primary-fg-color--light: oklch(0.18 0.004 250);
  --md-primary-fg-color--dark:  oklch(0.10 0.003 250);
  --md-primary-bg-color:        oklch(0.96 0.003 250);
  --md-primary-bg-color--light: oklch(0.76 0.004 250);

  /* Footer — match base, not a separate dark band */
  --md-footer-bg-color:         oklch(0.10 0.003 250);
  --md-footer-bg-color--dark:   oklch(0.10 0.003 250);
  --md-footer-fg-color:         oklch(0.76 0.004 250);
  --md-footer-fg-color--light:  oklch(0.58 0.005 250);
  --md-footer-fg-color--lighter:oklch(0.42 0.004 250);
}

/* Ember — accent. Single warm orange, used sparingly. */
[data-md-color-accent="custom"] {
  --md-accent-fg-color:             oklch(0.78 0.17 60);
  --md-accent-fg-color--transparent:oklch(0.78 0.17 60 / 0.12);
  --md-accent-bg-color:             oklch(0.15 0.02 60);     /* dark-warm fg */
  --md-accent-bg-color--light:      oklch(0.15 0.02 60);
}

/* Selection — accent-tinted */
::selection {
  background-color: oklch(0.78 0.17 60 / 0.30);
  color: oklch(0.96 0.003 250);
}

/* ---------- Typography ---------------------------------------------------- */

/* Body = 16px, generous leading for light-on-dark */
.md-typeset {
  font-size: 0.75rem;
  line-height: 1.55;
}

/* Headings: semibold, tight tracking, no period (enforce in copy, not CSS) */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--md-default-fg-color);
}

.md-typeset h1 { font-size: 1.875rem; line-height: 1.15; }   /* page title */
.md-typeset h2 { font-size: 1.5rem;   line-height: 1.3;  }   /* panel/card */
.md-typeset h3 { font-size: 1.1875rem; line-height: 1.3; }   /* subsection */

/* h4 = the microlabel pattern: uppercase, tracked, muted */
.md-typeset h4 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
  margin-top: 1.5rem;
}

/* Tabular numerics globally — operators scan columns */
.md-typeset,
.md-typeset table:not([class]),
.md-typeset code {
  font-variant-numeric: tabular-nums;
}

/* ---------- Chrome -------------------------------------------------------- */

/* Header: surface step + 1px subtle border, no shadow (surface step > shadow) */
.md-header {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid oklch(0.22 0.004 250);
  box-shadow: none;
}
.md-header[hidden] { display: none; }

.md-header--shadow {
  box-shadow: none;
}

/* Tabs strip: same surface, accent underline on active */
.md-tabs {
  background-color: var(--md-primary-fg-color);
  border-bottom: 1px solid oklch(0.22 0.004 250);
}
.md-tabs__link {
  opacity: 1;
  color: var(--md-default-fg-color--light);
}
.md-tabs__link--active,
.md-tabs__item--active > .md-tabs__link {
  color: var(--md-default-fg-color);
  border-bottom: 2px solid var(--md-accent-fg-color);
}

/* Sidebar: active item gets the accent (and only that item) */
.md-nav__link--active,
.md-nav__link[aria-current="page"] {
  color: var(--md-accent-fg-color);
  font-weight: 500;
}

/* Search input on the elevated surface */
.md-search__input {
  background-color: var(--md-default-bg-color--lighter);
  border-radius: 4px;
}
.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

/* ---------- Code ---------------------------------------------------------- */

.md-typeset code {
  background-color: var(--md-default-bg-color--light);
  border: 1px solid oklch(0.22 0.004 250);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.md-typeset pre > code {
  border-radius: 8px;
  border: 1px solid oklch(0.22 0.004 250);
  padding: 0.9em 1em;
}

/* No fake terminal chrome — kill any traffic-light decorations if a plugin adds them */
.md-typeset .highlight::before,
.md-typeset pre::before { content: none !important; }

/* ---------- Admonitions --------------------------------------------------- */
/* Anti-reference: NO left-edge colored stripes. Convert to flat bordered cards
   with a small accent on the title only. */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid oklch(0.30 0.005 250);
  border-left: 1px solid oklch(0.30 0.005 250);   /* override Material's stripe */
  border-radius: 8px;
  background-color: var(--md-default-bg-color--light);
  box-shadow: none;
  font-size: 0.9375rem;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background-color: transparent;
  border-bottom: 1px solid oklch(0.22 0.004 250);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Map admonition types to the semantic palette via title icon color */
.md-typeset .admonition.note   > .admonition-title::before,
.md-typeset details.note       > summary::before { background-color: oklch(0.66 0.14 225); }
.md-typeset .admonition.tip    > .admonition-title::before,
.md-typeset details.tip        > summary::before,
.md-typeset .admonition.success> .admonition-title::before,
.md-typeset details.success    > summary::before { background-color: oklch(0.74 0.15 145); }
.md-typeset .admonition.warning> .admonition-title::before,
.md-typeset details.warning    > summary::before { background-color: oklch(0.82 0.16 85);  }
.md-typeset .admonition.danger > .admonition-title::before,
.md-typeset details.danger     > summary::before,
.md-typeset .admonition.failure> .admonition-title::before,
.md-typeset details.failure    > summary::before { background-color: oklch(0.65 0.21 25);  }

/* ---------- Tables -------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid oklch(0.22 0.004 250);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--md-default-bg-color--light);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color--light);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ---------- Buttons ------------------------------------------------------- */

.md-typeset .md-button {
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid oklch(0.30 0.005 250);
  background-color: var(--md-default-bg-color--lightest);
  color: var(--md-default-fg-color);
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1),
              border-color    150ms cubic-bezier(0.4,0,0.2,1);
}
.md-typeset .md-button:hover {
  border-color: oklch(0.42 0.006 250);
}

.md-typeset .md-button--primary {
  background-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color);
  border-color: var(--md-accent-fg-color);
}
.md-typeset .md-button--primary:hover {
  background-color: oklch(0.70 0.19 50);
  border-color:     oklch(0.70 0.19 50);
}

/* ---------- Anti-references cleanup -------------------------------------- */

/* No gradients anywhere — kill any Material defaults that sneak one in */
.md-header,
.md-tabs,
.md-footer,
.md-nav__title { background-image: none !important; }

/* Reduced-motion honored globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}