/* ==========================================================================
   Docs-surface brand — "first light" accent on the Material documentation pages.

   Loaded site-wide by the overlay (mkdocs.home.yml `extra_css: assets/brand.css`)
   onto the plain Material docs surface. It re-skins Material's header to a warm
   ink bar with a dawn accent, styles the SaaS-style top nav that
   partials/source.html renders in the header's source slot, and re-tokens both
   color schemes to the warm brand neutrals (bone paper light / warm ink dark).
   The palette follows the visitor's OS preference by default, with a header
   toggle to override — the scheme pair is configured in mkdocs.home.yml.

   Scope note: this is the docs surface ONLY. The baldur.sh landing is a
   standalone static page with its own stylesheet (web/root/landing/landing.css)
   — it does NOT load this file, and this file carries none of the landing
   sections. The `--bd-dawn` accent below is duplicated from landing.css's fuller
   `:root` token block (the only shared value the docs chrome references); a
   brand-look change touches both files. See landing.css's header comment.
   ========================================================================== */

/* ----- Shared accent token (see landing.css for the full palette) -------- */
:root {
  --bd-dawn: #e8a33d;       /* brand accent — first light */
}

/* ----- Typography: the landing's typeface on the docs surface -------------
   Same self-hosted variable font file the landing ships (mkdocs.home.yml sets
   `font: false`, so Material loads no Google-Fonts Roboto). Material appends
   its own system fallbacks after var(--md-text-font). */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../landing/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
}

:root {
  --md-text-font: "Schibsted Grotesk";
  --md-code-font: "Cascadia Code";
}

/* ----- Site-wide brand --------------------------------------------------- */
/* `body[data-md-color-primary]` (0,1,1) beats `[data-md-color-primary=indigo]`
   (0,1,0), so the warm-ink header wins over the named-palette default. Header
   text stays light (Material's --md-primary-bg-color is already white). */
body[data-md-color-primary] {
  --md-primary-fg-color: #14110d;
  --md-primary-fg-color--light: #1c1812;
  --md-primary-fg-color--dark: #0c0a07;
}

body[data-md-color-accent] {
  --md-accent-fg-color: #e8a33d;
}

/* NOTE on wide viewports: Material scales its root font up on wide screens
   (137.5% at >=100em, 150% at >=125em) — kept as-is for readability. The
   landing mirrors the same ramp (110%/120% of its 16px root — see
   landing.css), so both surfaces scale together and stay px-identical. */

/* ----- Shell: align the docs grid to the landing rail ---------------------
   The landing bands are 72rem at a 16px root = 1152px; Material's rem is 20px,
   so the same rail is 57.6rem here. This puts the header content and the
   sidebar/content shell on the exact alignment rail the landing uses, so the
   wordmark and nav don't jump when crossing landing <-> docs. */
.md-grid {
  max-width: 57.6rem;
}

/* Match the landing header's height (57px) and side insets, so the wordmark
   and the right nav land on the landing's exact x-positions (left 163px /
   GitHub icon right edge 1277px at a 1440 viewport). */
.md-header__inner {
  padding: 0.225rem 0.95rem 0.225rem 0.75rem;
}

/* ----- Chrome: wordmark as the home link ----------------------------------
   partials/logo.html renders the "Baldur" wordmark inside Material's header
   home anchor, so the brand text is clickable (-> site root, the landing).
   The plain-text .md-header__title duplicate and the drawer logo are hidden. */
.md-header__button.md-logo {
  padding: 0.4rem 0;
}

.md-header__button.md-logo .bd-wordmark {
  /* 0.84rem at the 20px root = 16.8px — the landing wordmark's exact size,
     with the same face and tracking (landing .bd-wordmark: 1.05rem/-0.01em) */
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: currentColor;
  white-space: nowrap;
}

/* visibility (not display): the title is the header's flex spacer, so it must
   keep its box to push the palette toggle and the SaaS nav to the right edge. */
.md-header__title {
  visibility: hidden;
}

.md-nav__button.md-logo {
  display: none;
}

/* ----- Typography: weighted headings (Material's default h1 is thin grey) - */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.015em;
}

.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ----- Light scheme: warm bone paper --------------------------------------
   The compound [data-md-color-primary] variant matches Material's own
   scheme+primary token rules in specificity so the brand values win. */
[data-md-color-scheme="default"],
[data-md-color-scheme="default"][data-md-color-primary] {
  --md-default-bg-color: #fcfaf4;
  --md-default-fg-color: rgba(43, 38, 28, 0.87);
  /* 0.68 alpha and the darkened ambers keep link/label text at or above the
     WCAG AA 4.5:1 ratio on the bone ground (0.6 / #a96a0e measured ~4.0-4.2). */
  --md-default-fg-color--light: rgba(43, 38, 28, 0.68);
  --md-default-fg-color--lighter: rgba(43, 38, 28, 0.32);
  --md-default-fg-color--lightest: rgba(43, 38, 28, 0.08);
  --md-typeset-color: #2b261c;
  --md-typeset-a-color: #8f5a09;
  --md-accent-fg-color: #7c500c;
  --md-code-bg-color: #f3f0e6;
  --md-code-fg-color: #33291a;
  --md-footer-bg-color: #14110d;
  --md-footer-bg-color--dark: #0c0a07;
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: #241f15;
}

/* ----- Dark scheme: warm ink (matches the landing ground) ----------------- */
[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-default-bg-color: #16130e;
  --md-default-fg-color: rgba(233, 227, 211, 0.92);
  --md-default-fg-color--light: rgba(233, 227, 211, 0.68);
  --md-default-fg-color--lighter: rgba(233, 227, 211, 0.38);
  --md-default-fg-color--lightest: rgba(233, 227, 211, 0.1);
  --md-typeset-color: #d9d2c0;
  --md-typeset-a-color: #e8a33d;
  --md-accent-fg-color: #f0b45c;
  --md-code-bg-color: #211c13;
  --md-code-fg-color: #e6dfcc;
  --md-footer-bg-color: #100e0a;
  --md-footer-bg-color--dark: #0c0a07;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #efe9d8;
}

/* ----- Header: SaaS-style top nav (replaces the repo/stars widget) ------- */
.md-header__source {
  width: auto;
  max-width: none;
}

/* Sizes are the landing's rendered pixels re-based to Material's 20px root
   (landing px / 20), so the nav renders px-identical on both surfaces:
   links 13.6px, gap 19.2px, CTA padding 5.12x13.6px, icon 19.2px. */
.bd-headnav {
  display: flex;
  align-items: center;
  gap: 0.96rem;
  justify-content: flex-end;
}

.bd-headnav__link {
  color: #d9d1c0;
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms;
}

.bd-headnav__link:hover {
  color: #ffffff;
}

.bd-headnav__cta {
  padding: 0.256rem 0.68rem;
  border: 1px solid #4a4232;
  border-radius: 8px;
  color: #f4edde;
}

.bd-headnav__cta:hover {
  background: var(--bd-dawn);
  border-color: var(--bd-dawn);
  color: #1c1508;
}

.bd-headnav__icon {
  display: inline-flex;
  align-items: center;
  color: #b3aa96;
  transition: color 120ms;
}

.bd-headnav__icon:hover {
  color: #ffffff;
}

.bd-headnav__icon svg {
  width: 0.96rem;
  height: 0.96rem;
  fill: currentColor;
}