/* ============================================================================
   Aletheia User Manual — slate theme
   Pins MkDocs Material's "slate" scheme to the app's slate tokens
   (frontend/src/theme/seeds.ts + marketing-site/assets/site.css): slate surface
   ramp (hue 260), nixie-orange accent used sparingly, liquid-oxygen blue for
   links/interactive, IBM Plex Sans/Mono in the same roles the app assigns.
   ============================================================================ */

[data-md-color-scheme="slate"] {
  /* surface ramp — slate, hue 260 */
  --al-bg-0: oklch(0.178 0.004 260);
  --al-bg-1: oklch(0.200 0.005 260);
  --al-bg-2: oklch(0.225 0.006 260);
  --al-bg-3: oklch(0.255 0.006 260);
  --al-bg-4: oklch(0.295 0.007 260);
  --al-line: oklch(0.30 0.005 260);
  --al-line-soft: oklch(0.235 0.005 260);

  /* foreground ramp — hue 250 */
  --al-fg-0: oklch(0.965 0.006 250);
  --al-fg-2: oklch(0.780 0.010 250);
  --al-fg-3: oklch(0.620 0.012 250);

  /* accent — nixie orange (identity + emphasis only) */
  --al-accent: oklch(0.78 0.14 55);
  --al-accent-l: oklch(0.85 0.115 58);
  /* primary — liquid-oxygen blue (links + interactive + data) */
  --al-primary: oklch(0.86 0.055 215);
  --al-primary-hi: oklch(0.78 0.075 215);

  /* --- map onto Material's tokens --- */
  --md-hue: 260;
  --md-default-bg-color: var(--al-bg-0);
  --md-default-bg-color--light: var(--al-bg-1);
  --md-default-bg-color--lighter: var(--al-bg-2);
  --md-default-bg-color--lightest: var(--al-bg-3);

  --md-default-fg-color: var(--al-fg-0);
  --md-default-fg-color--light: var(--al-fg-2);
  --md-default-fg-color--lighter: var(--al-fg-3);
  --md-default-fg-color--lightest: oklch(0.40 0.012 250);

  /* header + nav rail sit on bg-1; wordmark/text stays bright */
  --md-primary-fg-color: var(--al-bg-1);
  --md-primary-fg-color--light: var(--al-bg-2);
  --md-primary-fg-color--dark: var(--al-bg-0);
  --md-primary-bg-color: var(--al-fg-0);
  --md-primary-bg-color--light: var(--al-fg-2);

  /* accent (hover/active) = orange */
  --md-accent-fg-color: var(--al-accent);
  --md-accent-fg-color--transparent: oklch(0.78 0.14 55 / 0.1);
  --md-accent-bg-color: var(--al-bg-0);
  --md-accent-bg-color--light: var(--al-bg-1);

  /* links = blue, hover handled by accent */
  --md-typeset-a-color: var(--al-primary);

  /* code */
  --md-code-bg-color: var(--al-bg-2);
  --md-code-fg-color: var(--al-fg-0);

  --md-footer-bg-color: var(--al-bg-1);
  --md-footer-bg-color--dark: var(--al-bg-0);

  color-scheme: dark;
}

/* Header keeps a hairline so it reads as chrome, like the app's TopBar. */
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 1px solid var(--al-line);
}

/* Brand wordmark in the app's display face. */
.md-header__title,
.md-nav__title {
  letter-spacing: 0.01em;
}
.md-header__topic .md-ellipsis {
  font-family: "Major Mono Display", "IBM Plex Mono", monospace;
  text-transform: lowercase;
  font-weight: 400;
}

/* Links: blue by default, orange on hover — the app's exact convention. */
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--al-accent-l);
}

/* Section headings get a touch of the display face. */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: var(--al-fg-0);
  letter-spacing: -0.01em;
}
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-top: 1px solid var(--al-line-soft);
  padding-top: 1.2rem;
  margin-top: 2.2rem;
}

/* Inline code + keyboard keys read as the app's mono chips. */
[data-md-color-scheme="slate"] .md-typeset code {
  border: 1px solid var(--al-line-soft);
  border-radius: 4px;
}
[data-md-color-scheme="slate"] .md-typeset kbd {
  background: var(--al-bg-3);
  border: 1px solid var(--al-line);
  box-shadow: 0 2px 0 var(--al-bg-0);
  color: var(--al-fg-0);
}

/* Screenshot figures: framed like the marketing site's window chrome. */
.md-typeset figure img,
.md-typeset img.screenshot,
.md-typeset p > img {
  border: 1px solid var(--al-line);
  border-radius: 10px;
  box-shadow: 0 20px 48px -28px oklch(0 0 0 / 0.8);
  max-width: 100%;
}
.md-typeset figure {
  margin: 1.6em 0;
}
.md-typeset figcaption {
  color: var(--al-fg-3);
  font-size: 0.78rem;
  margin-top: 0.5em;
}

/* Tables: quiet zebra that matches the surface ramp. */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: 1px solid var(--al-line-soft);
  background: var(--al-bg-1);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--al-bg-2);
  color: var(--al-fg-0);
}

/* Admonitions: use the orange accent for the "tip/best-practice" flavor. */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  border-radius: 8px;
  border-left-width: 3px;
}

/* The search field + hits sit on the surface ramp. */
[data-md-color-scheme="slate"] .md-search__form {
  background: var(--al-bg-2);
}
[data-md-color-scheme="slate"] .md-search__form:hover {
  background: var(--al-bg-3);
}