/* ============================================================
   docs.eternego.ai — extra.css
   Drop into docs/stylesheets/extra.css

   This file is the bridge between MkDocs Material's class names
   and our brand tokens. It does two things:
   1. Import the shared design-system.css (which defines the tokens).
   2. Map Material's selectors (.md-header, .md-typeset, .md-nav, ...)
      to those tokens so the docs look like eternego.ai.
   ============================================================ */

@import url('./design-system.css');

/* Match eternego.ai's 16px base. Material defaults the root to 125%
   (and scales further on wide screens), which makes the docs read a
   size larger than the website everywhere — menu, body, headings.
   Pin it to 100% across breakpoints so the shared design-system sizes
   land the same here as on the site. */
html { font-size: 100%; }
@media screen and (min-width: 100em) { html { font-size: 100%; } }
@media screen and (min-width: 125em) { html { font-size: 100%; } }

/* ----- map Material's variables to ours ----- */
:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--bg);
  --md-default-bg-color--light: var(--bg-elev);
  --md-default-bg-color--lighter: var(--bg-elev);
  --md-default-bg-color--lightest: var(--bg-sunk);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--ink-2);
  --md-default-fg-color--lighter: var(--ink-3);
  --md-default-fg-color--lightest: var(--rule);
  --md-primary-fg-color: var(--bg);          /* header bg */
  --md-primary-fg-color--light: var(--bg-elev);
  --md-primary-fg-color--dark: var(--bg-sunk);
  --md-primary-bg-color: var(--ink);
  --md-primary-bg-color--light: var(--ink-2);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: var(--accent-bg);
  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--accent-ink);
  --md-code-bg-color: var(--bg-elev);
  --md-code-fg-color: var(--ink);
  --md-code-hl-color: var(--accent-bg);
  --md-text-font-family: var(--font-body);
  --md-code-font-family: var(--font-mono);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--bg);
  --md-default-bg-color--light: var(--bg-elev);
  --md-default-bg-color--lighter: var(--bg-elev);
  --md-default-bg-color--lightest: var(--bg-sunk);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--ink-2);
  --md-default-fg-color--lighter: var(--ink-3);
  --md-default-fg-color--lightest: var(--rule);
  --md-primary-fg-color: var(--bg);
  --md-primary-fg-color--light: var(--bg-elev);
  --md-primary-fg-color--dark: var(--bg-sunk);
  --md-primary-bg-color: var(--ink);
  --md-accent-fg-color: var(--accent);
  --md-accent-fg-color--transparent: var(--accent-bg);
  --md-typeset-color: var(--ink);
  --md-typeset-a-color: var(--accent-ink);
  --md-code-bg-color: var(--bg-elev);
  --md-code-fg-color: var(--ink);
}
[data-md-color-scheme="slate"] body { /* dark mode → use our dark tokens */ }
[data-md-color-scheme="slate"]:root,
:root[data-md-color-scheme="slate"] { /* propagate to design-system.css */ }

/* Mount our [data-theme] off Material's scheme attribute so design-system.css
   tokens flip automatically when the user toggles Material's palette switch. */
[data-md-color-scheme="default"] { /* defaults already light */ }
[data-md-color-scheme="slate"] {
  --bg: #14110f;
  --bg-elev: #1d1916;
  --bg-sunk: #100d0b;
  --ink: #f1e9d9;
  --ink-2: #a89e8d;
  --ink-3: #6e6557;
  --rule: #2b2622;
  --rule-soft: #221e1b;
  --accent: #d97757;
  --accent-ink: #e89072;
  --accent-bg: #2a1e18;
  --link: var(--accent-ink);
  --window-chrome: #221d19;
  --window-body: #15120f;
}

/* ----- typography: pull display serif into h1/h2 ----- */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.md-typeset h1 {
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.6em;
}
.md-typeset h2 {
  font-size: 1.65rem;
  margin-top: 2.2em;
  padding-top: 1em;
  border-top: 1px solid var(--rule-soft);
}
.md-typeset h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
}
.md-typeset { font-size: 1rem; line-height: 1.7; }
.md-typeset code { font-family: var(--font-mono); }
.md-typeset pre {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

/* ----- header (Material's default) → ours ----- */
.md-header {
  background: color-mix(in oklab, var(--bg) 88%, transparent) !important;
  color: var(--ink);
  box-shadow: none;
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(140%) blur(10px);
  transition: border-color 220ms ease;
}
.md-header[data-md-state="shadow"] { border-bottom-color: var(--rule); box-shadow: none; }
.md-header__title, .md-header__topic { font-family: var(--font-display); font-weight: 500; }

/* nav tabs (Home / Docs / Blog cross-site links) */
.md-tabs { background: transparent; border-bottom: 1px solid var(--rule); }
.md-tabs__link { color: var(--ink-2); opacity: 1; font-size: 0.86rem; }
.md-tabs__link:hover, .md-tabs__link--active { color: var(--ink); }

/* left sidebar (sections) */
.md-nav__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.md-nav__link { color: var(--ink-2); font-size: 0.88rem; }
.md-nav__link:hover { color: var(--ink); }
.md-nav__link--active {
  color: var(--accent-ink);
  border-left: 2px solid var(--accent);
  background: var(--accent-bg);
}
[data-md-color-scheme="slate"] .md-nav__link--active { color: var(--accent); }

/* right rail TOC */
.md-nav--secondary .md-nav__title { display: none; }
.md-nav--secondary > .md-nav__list { border-left: 1px solid var(--rule); }

/* search */
.md-search__form { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--r-md); }
.md-search__input { color: var(--ink); font-family: var(--font-body); }
.md-search__input::placeholder { color: var(--ink-3); }
.md-search__icon[for="__search"] { color: var(--ink-3); }

/* admonitions (Material's callouts) — match our look */
.md-typeset .admonition, .md-typeset details {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: none;
}
.md-typeset .admonition-title, .md-typeset summary {
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}
[data-md-color-scheme="slate"] .md-typeset .admonition-title { color: var(--accent); }
.md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--accent); }
.md-typeset .admonition.warning, .md-typeset details.warning {
  background: color-mix(in oklab, #c89026 15%, var(--bg));
  border-left-color: #c89026;
}
.md-typeset .warning .admonition-title { color: #946818; }
[data-md-color-scheme="slate"] .md-typeset .warning .admonition-title { color: #d4a548; }

/* footer (Material's) hidden — we use our shared footer instead */
.md-footer { display: none !important; }

/* "Edit this page" link */
.md-content__button { color: var(--ink-3); }
.md-content__button:hover { color: var(--accent-ink); }

/* tables */
.md-typeset table {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.md-typeset table th {
  background: var(--bg-sunk);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}