/* ==========================================================================
   Dtyped brand overlay — docs site
   --------------------------------------------------------------------------
   The docs counterpart to client/src/styles/brand-dtyped.css. It rebinds the
   Material for MkDocs custom properties that stylesheets/extra.css declares,
   so the whole theme re-skins without touching any page content.

   CONDITIONAL LOADING. MkDocs is a static site generator: the HTML is built
   once per deploy, so there is no runtime toggle like the SPA's. Instead this
   file is appended to `extra_css` only for non-production builds, by
   scripts/apply_docs_brand.py, which the docs workflow runs before
   `mkdocs build`. A prod build never includes it and renders OneDNA.

   It is scoped to :root and simply loaded later than extra.css, so its
   declarations win by source order. Nothing here is brand-conditional at
   runtime — inclusion of the file IS the condition.

   Palette rationale, including why the brand coral is never used for text,
   is documented in design-system/themes/dtyped.css.
   ========================================================================== */

:root {
  /* Brand accents — the coral is a FILL colour only. */
  --dtyped-coral: hsl(6, 97.6%, 67.8%); /* #FD6E5D */
  --dtyped-coral-light: hsl(6, 100%, 78%); /* #FF9B8F */
  --dtyped-coral-dark: hsl(7, 85%, 61%); /* #F05B46 */
  --dtyped-coral-text: hsl(7, 80%, 46%); /* #D32D17 — 5.04:1 on white */
  --dtyped-navy: hsl(240, 29%, 25%); /* #2c2c51 */
  --dtyped-teal: hsl(179, 88%, 13%); /* #043F3E */

  /* Material's primary drives the header bar and nav highlights — a large
     fill, so it takes the true brand coral. */
  --md-primary-fg-color: var(--dtyped-coral);
  --md-primary-fg-color--light: var(--dtyped-coral-light);
  --md-primary-fg-color--dark: var(--dtyped-coral-dark);

  /* Accent drives links and hover states — text-sized, so it takes the
     accessible tier rather than the fill coral (which is 2.80:1 on white). */
  --md-accent-fg-color: var(--dtyped-coral-text);
  --md-accent-fg-color--transparent: hsl(7, 80%, 46%, 0.1);
}

/* The docs header is NOT a primary-coloured fill: extra.css deliberately
   makes it white in light mode and charcoal in dark, with the brand colour
   only as a 2px underline. So there is no white-on-coral contrast problem to
   solve here — the header just needs the brand's own neutrals and underline.
   (An earlier revision of this file overrode the header to navy-on-coral,
   which was wrong: it assumed Material's default filled header.) */
.md-header {
  box-shadow: 0 2px 0 0 var(--dtyped-coral);
}

/* Light header sits on white, so its controls take the brand navy. */
[data-md-color-scheme="default"] .md-header__title,
[data-md-color-scheme="default"] .md-header__button,
[data-md-color-scheme="default"] .md-header__button.md-icon,
[data-md-color-scheme="default"] .md-search__icon {
  color: var(--dtyped-navy) !important;
}
[data-md-color-scheme="default"] .md-header__button:hover {
  color: var(--dtyped-coral-text) !important;
}

/* Dark header background: extra.css uses --onedna-charcoal, so rebind that
   token to the Dtyped navy rather than duplicating the rule. */
[data-md-color-scheme="slate"] {
  --onedna-charcoal: var(--dtyped-navy);
}

/* The Dtyped symbol is already coral on transparent and reads on both the
   white and navy headers, so the OneDNA dark-mode invert filter must not
   apply to it — that would turn it into a white blob. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-nav__button.md-logo img {
  filter: none;
}

/* On the dark scheme the coral holds 6.86:1 against the canvas, so links use
   the full-strength brand hue rather than the darkened text tier. */
[data-md-color-scheme="slate"] {
  --md-accent-fg-color: var(--dtyped-coral);
  --md-accent-fg-color--transparent: hsl(6, 97.6%, 67.8%, 0.1);
}

/* Typography — Raleway for headings, Mulish for body, matching the SPA.
   Self-hosted rather than loaded from the Google CDN: on an EasyAuth-gated
   host the x-zumo-auth header fails fonts.gstatic.com's CORS preflight and
   every font request errors. Variable fonts, so one file per family covers
   all weights. */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Raleway-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../assets/fonts/Mulish-variable.woff2") format("woff2");
}

:root {
  --md-text-font:
    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family:
    "Raleway",
    "Mulish",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  letter-spacing: -0.02em;
}
.md-typeset h1,
.md-typeset h2 {
  font-weight: 800;
}