/**
 * MrDocs Design System — F0 foundation
 * =====================================================================
 * Single source of truth for the comic / C++-superhero visual language,
 * extracted from the landing page (docs/website/styles.css) and expressed
 * as three token layers:
 *
 *   Layer 0 — Primitives    raw, theme-agnostic values (palette, type ramp,
 *                           spacing, radii, borders, comic shadows, motion)
 *   Layer 1 — Semantic      role-based tokens with light / dark variants
 *   Layer 2 — Component     component-scoped tokens (button, card, comic box,
 *                           code, nav) that reference the semantic layer
 *
 * Consumers (docs/website landing page, docs/ui Antora theme) map their own
 * variables onto these — they never hardcode a hex value. Wiring each surface
 * to consume this file happens in the later redesign slices; F0 only
 * establishes the vocabulary.
 *
 * Theming is tri-state: light is the default, dark applies both via the OS
 * preference (prefers-color-scheme) and via an explicit [data-theme] override
 * so a toggle can force either direction.
 */

/* =====================================================================
 * METRIC-COMPATIBLE FALLBACK FACES
 * =====================================================================
 * The brand faces are much narrower than the system faces that stand in for
 * them while they download, so a plain swap re-wraps every line: measured on
 * the landing hero, Impact is 22.3% wider and 15.1% taller than Bangers,
 * which turns a three-line headline into four and pushes the copy below it
 * down by 173px. Courier New is 13.5% wider and 13.0% taller than Special
 * Elite, worth ~70px over a doc page.
 *
 * These faces re-declare the same local fonts with their metrics scaled onto
 * the brand faces', so the stand-in occupies exactly the same box. Measured
 * residual error after the overrides is 0.01% on advance width -- line breaks
 * are identical -- which turns the swap from a reflow into a repaint.
 *
 * The descriptors were derived by measurement, not by hand: see the ratios
 * above. size-adjust scales the overrides too, hence ascent-override > 100%.
 *
 * src is local() only: no network cost, and where the local font is missing
 * (most Linux) the face simply fails and the stack falls through to the plain
 * families listed after it, which is exactly today's behaviour.
 * ===================================================================== */
@font-face {
  font-family: "Bangers Fallback";
  src: local("Impact");
  size-adjust: 81.8%;
  ascent-override: 107.6%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Special Elite Fallback";
  src: local("Courier New"), local("CourierNewPSMT"), local("Courier");
  size-adjust: 88.1%;
  ascent-override: 79.5%;
  descent-override: 34.1%;
  line-gap-override: 0%;
}

/* =====================================================================
 * LAYER 0 — PRIMITIVES  (theme-agnostic)
 * ===================================================================== */
:root {
  /* --- Palette: brand blue ------------------------------------------ */
  --ds-blue-200: #78c8ff; /* dark-theme primary base */
  --ds-blue-400: #0091ea; /* secondary hover border    */
  --ds-blue-500: #1095c1; /* light-theme primary       */
  --ds-blue-600: #067da6; /* primary hover             */
  --ds-blue-700: #0078c8; /* primary active            */
  --ds-blue-100: #bcebfb; /* demo / tint               */
  --ds-blue-300: #93c5fd; /* Figma exact: hero title, primary button fill */
  --ds-code-800: #272e3e; /* Figma exact: code panel body               */

  /* --- Palette: brand gold (comic CTA ramp) ------------------------- */
  --ds-gold-400: #ffd700; /* peak / hover              */
  --ds-gold-500: #e5be33; /* rest / function-name / check accent */
  --ds-gold-300: #f1d874; /* Figma exact: hero title alt, GitHub button */
  --ds-gold-700: #c8aa28; /* active / pressed          */

  /* --- Palette: accent label (eyebrow pills, card titles) ---------- */
  /* Theme-swapped rather than a ramp: the mockups use magenta on the
     cream/light surfaces and the warmer red on the dark ones. */
  --ds-pink-500: #ec4899; /* light-theme label (Figma exact) */
  --ds-red-500: #ff4c4c; /* dark-theme label (Figma exact) */

  /* --- Palette: ink & paper (light surfaces) ----------------------- */
  --ds-black: #000; /* comic borders & hard shadows */
  --ds-ink-900: #0e0e0e; /* text on gold/blue fills   */
  --ds-ink-950: #0f172a; /* Figma exact: outlines, dark fills, panel chrome */
  --ds-white: #fff;
  --ds-paper: #fef7e1; /* warm cream page background  */
  /* The mockups' page cream. Currently used only as the code panel's plain
     text colour; re-pointing the page background to it is a follow-up. */
  --ds-paper-50: #fdfaf5;
  --ds-paper-raised: #fbfbfc; /* cards / dropdowns      */
  --ds-paper-code: #f9fafb; /* inline / block code bg   */

  /* --- Palette: navy (dark surfaces) ------------------------------- */
  --ds-navy-900: #0e1419; /* logo knockout            */
  --ds-navy-800: #11191f; /* dark page background     */
  --ds-navy-700: #141e26; /* dark card                */
  --ds-navy-600: #18232c; /* dark code / sectioning   */
  --ds-navy-500: #24333e; /* dark divider / range     */
  --ds-navy-400: #374956; /* dark form border         */

  /* --- Typography: families ---------------------------------------- */
  --ds-font-body: "Special Elite", "Special Elite Fallback", "Roboto",
    sans-serif;
  --ds-font-mono:
    "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono",
    "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Comic display face for headings. Fallbacks are heavy/condensed faces
     rather than the body stack: falling a comic headline through a
     typewriter face looks broken, and it is what showed during the load
     flash before the fonts were preloaded. */
  --ds-font-display: "Bangers", "Bangers Fallback", Impact, Haettenschweiler,
    "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;

  /* --- Typography: weights ----------------------------------------- */
  --ds-weight-regular: 400;
  --ds-weight-medium: 600; /* CTA labels               */
  --ds-weight-bold: 700; /* headings                 */
  --ds-weight-display: 800; /* hero headings            */

  /* --- Typography: responsive base size ---------------------------- */
  --ds-font-size: 16px; /* → 20px, see breakpoints below */

  /* --- Typography: type scale (desktop peak; see fluid overrides) --- */
  --ds-text-h1: 3rem;
  --ds-text-h2: 2.25rem;
  --ds-text-h3: 1.5rem;
  --ds-text-h4: 1.25rem;
  --ds-text-h5: 1.125rem;
  --ds-text-h6: 1rem;
  --ds-text-body: 1rem;
  --ds-text-small: 0.875em;

  /* --- Typography: line-heights ------------------------------------ */
  --ds-leading-tight: 1.125; /* h1                     */
  --ds-leading-snug: 1.25; /* h2                     */
  --ds-leading-normal: 1.5; /* body                   */

  /* --- Spacing scale (base unit = 1rem) ---------------------------- */
  --ds-space: 1rem;
  --ds-space-2xs: 0.25rem;
  --ds-space-xs: 0.5rem;
  --ds-space-sm: 0.75rem;
  --ds-space-md: 1rem;
  --ds-space-lg: 1.5rem;
  --ds-space-xl: 2rem;
  --ds-space-2xl: 3rem;
  --ds-space-3xl: 4rem;
  --ds-section-gap: 3rem; /* → 4rem on ≥576px         */

  /* --- Radii & borders --------------------------------------------- */
  --ds-radius: 0.5rem;
  --ds-radius-pill: 2rem;
  --ds-border-width: 1px;
  --ds-border-width-bold: 2px; /* comic outlines         */
  --ds-outline-width: 3px;

  /* --- Shadows: comic signature (hard, no blur) -------------------- */
  --ds-shadow-comic: 6px 6px 0 var(--ds-black);
  --ds-shadow-comic-soft: 6px 6px 0 rgba(0, 0, 0, 0.8);
  --ds-shadow-comic-pressed: 2px 2px 0 var(--ds-black);
  --ds-shadow-comic-pressed-soft: 2px 2px 0 rgba(0, 0, 0, 0.8);
  --ds-drop-comic: drop-shadow(7px 10px 0 rgba(0, 0, 0, 0.7));
  /* Soft ambient card elevation (light). */
  --ds-shadow-card-light:
    0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
  --ds-shadow-card-dark:
    0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
    0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),
    0 0 0 0.0625rem rgba(0, 0, 0, 0.015);

  /* --- Motion ------------------------------------------------------- */
  --ds-transition: 0.2s ease-in-out;
  --ds-lift: translateY(-2px); /* hover                 */
  --ds-press: translateY(1px); /* active                */

  /* --- Container max-widths ---------------------------------------- */
  --ds-container-sm: 510px;
  --ds-container-md: 700px;
  --ds-container-lg: 920px;
  --ds-container-xl: 1130px;

  /* --- Z-index scale ----------------------------------------------- */
  --ds-z-nav: 1;
  --ds-z-toolbar: 2;
  --ds-z-menu: 3;
  --ds-z-navbar: 4;
  --ds-z-switcher: 5;
}

/* Responsive base font size (drives all rem-based tokens). */
@media (min-width: 576px) {
  :root {
    --ds-font-size: 17px;
    --ds-section-gap: 4rem;
  }
}
@media (min-width: 768px) {
  :root {
    --ds-font-size: 18px;
  }
}
@media (min-width: 992px) {
  :root {
    --ds-font-size: 19px;
  }
}
@media (min-width: 1200px) {
  :root {
    --ds-font-size: 20px;
  }
}

/* Fluid heading ramp: h1 2rem → 3rem, h2 1.75rem → 2.25rem. */
:root {
  --ds-text-h1: 2rem;
  --ds-text-h2: 1.75rem;
}
@media (min-width: 576px) {
  :root {
    --ds-text-h1: 2.25rem;
    --ds-text-h2: 1.875rem;
  }
}
@media (min-width: 768px) {
  :root {
    --ds-text-h1: 2.5rem;
    --ds-text-h2: 2rem;
  }
}
@media (min-width: 992px) {
  :root {
    --ds-text-h1: 2.75rem;
    --ds-text-h2: 2.125rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --ds-text-h1: 3rem;
    --ds-text-h2: 2.25rem;
  }
}

/* =====================================================================
 * LAYER 1 — SEMANTIC  (role-based, themed)
 * ---------------------------------------------------------------------
 * Light is the default. Dark applies via OS preference AND via an
 * explicit [data-theme=dark] override. The gold accent is shared across
 * both themes; only surfaces, text, borders, and the primary blue shift.
 * ===================================================================== */

/* ---- Light (default + forced) -------------------------------------- */
:root:not([data-theme="dark"]),
[data-theme="light"] {
  color-scheme: light;

  --ds-color-bg: var(--ds-paper);
  --ds-color-surface: var(--ds-paper-raised);
  --ds-color-surface-sunken: var(--ds-paper-code);
  --ds-color-surface-accent: var(--ds-blue-100);
  --ds-color-label: var(--ds-pink-500);
  --ds-color-halftone: rgba(15, 23, 42, 0.1);
  /* Read from the Figma file 2026-08-20 (Homepage - Light/Dark Theme). */
  --ds-color-outline: var(--ds-ink-950); /* #0F172A */
  --ds-color-doc-surface: var(--ds-paper-50); /* #FDFAF5 */
  --ds-color-icon-box: var(--ds-blue-300); /* #93C5FD */
  --ds-color-icon-ink: var(--ds-ink-950);
  --ds-color-card-text: #6e727b;
  --ds-color-title: var(--ds-blue-300); /* #93C5FD */
  --ds-color-title-alt: var(--ds-gold-300); /* #F1D874 */
  --ds-color-hero-text: var(--ds-ink-950);
  --ds-color-code-shell: var(--ds-paper-50);
  --ds-color-code-chrome: var(--ds-ink-950);
  --ds-color-code-body: var(--ds-code-800); /* #272E3E */
  --ds-city-opacity: 0.5;
  --ds-band-opacity: 0.7;

  --ds-color-text: rgba(0, 0, 0, 0.8);
  --ds-color-heading: rgba(0, 0, 0, 0.95);
  --ds-color-muted: rgba(0, 0, 0, 0.5);
  --ds-color-border: rgba(0, 0, 0, 0.1);

  --ds-color-primary: var(--ds-blue-500);
  --ds-color-primary-hover: var(--ds-blue-600);
  --ds-color-primary-active: var(--ds-blue-700);
  --ds-color-primary-focus: rgba(16, 149, 193, 0.125);
  --ds-color-on-primary: var(--ds-white);

  --ds-color-accent: var(--ds-gold-500);
  --ds-color-accent-hover: var(--ds-gold-400);
  --ds-color-accent-active: var(--ds-gold-700);
  --ds-color-on-accent: var(--ds-ink-900);

  --ds-color-nav-bg: rgba(255, 255, 255, 0.7);
  --ds-color-nav-border: rgba(115, 130, 140, 0.2);

  --ds-color-valid: #388e3c;
  --ds-color-invalid: #c62828;
  --ds-color-mark-bg: #fff2ca;
  --ds-color-mark-text: #543a26;

  --ds-shadow-card: var(--ds-shadow-card-light);

  /* Code / syntax (light) */
  --ds-code-bg: hsl(205deg, 20%, 94%);
  --ds-code-text: var(--ds-color-muted);
  --ds-code-tag: hsl(330deg, 40%, 50%);
  --ds-code-property: hsl(185deg, 40%, 40%);
  --ds-code-value: hsl(40deg, 20%, 50%);
  --ds-code-comment: hsl(205deg, 14%, 68%);
}

/* ---- Dark (OS preference, unless explicitly light) ----------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ds-color-bg: var(--ds-navy-800);
    --ds-color-surface: var(--ds-navy-700);
    --ds-color-surface-sunken: var(--ds-navy-600);
    --ds-color-surface-accent: var(--ds-navy-700);
    --ds-color-label: var(--ds-red-500);
    --ds-color-halftone: #181f30; /* 316:230726: darker than the #272E3F ground */
    /* Dark uses pure black for outlines, not #0F172A. */
    --ds-color-outline: #000;
    --ds-color-doc-surface: #171c26;
    --ds-color-icon-box: #3d8bff;
    --ds-color-icon-ink: var(--ds-white);
    --ds-color-card-text: #a9abb2;
    --ds-color-title: #3d8bff; /* dark line 1 is a deeper blue than light */
    --ds-color-title-alt: #facc15;
    --ds-color-hero-text: var(--ds-white);
    --ds-color-code-shell: #272e3f;
    --ds-color-code-chrome: #000;
    --ds-color-code-body: #141720;
    --ds-city-opacity: 0.3;
    --ds-band-opacity: 0.3;

    --ds-color-text: rgba(255, 255, 255, 0.9);
    --ds-color-heading: rgba(255, 255, 255, 0.98);
    --ds-color-muted: rgba(255, 255, 255, 0.6);
    --ds-color-border: rgba(255, 255, 255, 0.1);

    --ds-color-primary: rgba(120, 200, 255, 0.9);
    --ds-color-primary-hover: rgba(140, 210, 255, 0.95);
    --ds-color-primary-active: var(--ds-blue-200);
    --ds-color-primary-focus: rgba(120, 200, 255, 0.2);
    --ds-color-on-primary: rgba(0, 0, 0, 0.9);

    --ds-color-nav-bg: rgba(16, 24, 30, 0.8);
    --ds-color-nav-border: rgba(115, 130, 140, 0.2);

    --ds-color-valid: rgba(46, 125, 50, 0.5);
    --ds-color-invalid: rgba(183, 28, 28, 0.5);
    --ds-color-mark-bg: #d1c284;
    --ds-color-mark-text: #11191f;

    --ds-shadow-card: var(--ds-shadow-card-dark);

    --ds-code-bg: var(--ds-navy-600);
    --ds-code-text: var(--ds-color-muted);
    --ds-code-tag: hsl(330deg, 30%, 50%);
    --ds-code-property: hsl(185deg, 30%, 50%);
    --ds-code-value: hsl(40deg, 10%, 50%);
    --ds-code-comment: #4d606d;
  }
}

/* ---- Dark (forced) ------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --ds-color-bg: var(--ds-navy-800);
  --ds-color-surface: var(--ds-navy-700);
  --ds-color-surface-sunken: var(--ds-navy-600);
  --ds-color-surface-accent: var(--ds-navy-700);
  --ds-color-label: var(--ds-red-500);
  --ds-color-halftone: #181f30; /* 316:230726: darker than the #272E3F ground */
  --ds-color-outline: #000;
  --ds-color-doc-surface: #171c26;
  --ds-color-icon-box: #3d8bff;
  --ds-color-icon-ink: var(--ds-white);
  --ds-color-card-text: #a9abb2;
  --ds-color-title: #3d8bff;
  --ds-color-title-alt: #facc15;
  --ds-color-hero-text: var(--ds-white);
  --ds-color-code-shell: #272e3f;
  --ds-color-code-chrome: #000;
  --ds-color-code-body: #141720;
  --ds-city-opacity: 0.3;
  --ds-band-opacity: 0.3;

  --ds-color-text: rgba(255, 255, 255, 0.9);
  --ds-color-heading: rgba(255, 255, 255, 0.98);
  --ds-color-muted: rgba(255, 255, 255, 0.6);
  --ds-color-border: rgba(255, 255, 255, 0.1);

  --ds-color-primary: rgba(120, 200, 255, 0.9);
  --ds-color-primary-hover: rgba(140, 210, 255, 0.95);
  --ds-color-primary-active: var(--ds-blue-200);
  --ds-color-primary-focus: rgba(120, 200, 255, 0.2);
  --ds-color-on-primary: rgba(0, 0, 0, 0.9);

  --ds-color-nav-bg: rgba(16, 24, 30, 0.8);
  --ds-color-nav-border: rgba(115, 130, 140, 0.2);

  --ds-color-valid: rgba(46, 125, 50, 0.5);
  --ds-color-invalid: rgba(183, 28, 28, 0.5);
  --ds-color-mark-bg: #d1c284;
  --ds-color-mark-text: #11191f;

  --ds-shadow-card: var(--ds-shadow-card-dark);

  --ds-code-bg: var(--ds-navy-600);
  --ds-code-text: var(--ds-color-muted);
  --ds-code-tag: hsl(330deg, 30%, 50%);
  --ds-code-property: hsl(185deg, 30%, 50%);
  --ds-code-value: hsl(40deg, 10%, 50%);
  --ds-code-comment: #4d606d;
}

/* =====================================================================
 * LAYER 2 — COMPONENT  (reference the semantic layer only)
 * ===================================================================== */
:root {
  /* ---- Halftone dot field (comic print texture) ------------------- */
  --ds-halftone-dot: var(--ds-color-halftone);
  /* Measured off the mockups 2026-08-20: the dot grid runs on a 6.75px
     pitch (deltas alternate 6/7 on both axes). The previous 14px was a
     guess made before the design file was readable. */
  --ds-halftone-dot-size: 1.4px;
  --ds-halftone-gap: 6.75px;
  /* How far down the section the field stays visible before fading out. */
  --ds-halftone-extent: 55%;

  /* ---- Code panel (hero + example rows) --------------------------- *
   * Dark in BOTH themes per the mockups, so these are deliberately
   * theme-invariant: the themed --hl-* vars would go invisible here in
   * light mode. Syntax colours reuse the brand palette. */
  --ds-code-panel-bg: var(--ds-color-code-body);
  --ds-code-panel-chrome: var(--ds-color-code-chrome);
  --ds-code-panel-border: var(--ds-color-outline);
  --ds-code-panel-fg: var(--ds-paper-50); /* plain code text; comments use --ds-code-panel-comment */
  --ds-code-panel-comment: #6e727b;
  --ds-code-panel-linenum: rgba(255, 255, 255, 0.4);
  --ds-code-panel-keyword: var(--ds-color-label);
  --ds-code-panel-fn: var(--ds-blue-300);
  --ds-code-panel-tab: var(--ds-white);

  /* ---- Hero cityscape ---------------------------------------------- *
   * Skyline band anchored to the bottom of the hero. Height is width-
   * relative so the art keeps its 3.07 aspect: on desktop it spans the
   * viewport exactly (100vw / 3.07 = 32.5vw); on mobile the mockup zooms
   * it well past the viewport and crops, hence the much larger 92vw. */
  --ds-city-height: 92vw;

  /* ---- Feature card ----------------------------------------------- *
   * The card's outer surface is the page colour, so it reads as a ring
   * around the tinted inner panel -- the same wrapper pattern Figma uses
   * on the hero buttons. The tint is the one value that does not change
   * between themes. */
  --ds-color-card-tint: rgba(30, 120, 255, 0.1); /* #1E78FF at 10% */

  /* ---- Label pill (row badges, hero eyebrow) — Figma exact -------- */
  --ds-badge-bg: var(--ds-color-label);
  --ds-badge-text: var(--ds-white);
  --ds-badge-border-width: var(--ds-border-width-bold);
  /* Figma specifies #0F172A for the edge, not pure black. */
  --ds-badge-border-color: var(--ds-color-outline);
  --ds-badge-shadow: 2px 2px 0 var(--ds-badge-border-color);
  --ds-badge-radius: 0;
  --ds-badge-padding: 6px 12px;
  --ds-badge-font: var(--ds-font-display);
  --ds-badge-size: 16px;
  --ds-badge-leading: 16px;
  --ds-badge-tracking: 0.1em;

  /* ---- Comic card (feature grid) ---------------------------------- */
  --ds-feature-bg: var(--ds-color-surface-accent);
  --ds-feature-border-width: var(--ds-border-width-bold);
  --ds-feature-border-color: var(--ds-black);
  --ds-feature-radius: var(--ds-radius);
  --ds-feature-shadow: var(--ds-shadow-comic);
  --ds-feature-padding: var(--ds-space-lg);
  --ds-feature-title-color: var(--ds-color-label);
  /* Icon sits in its own bordered tile in the mockups. */
  --ds-feature-icon-size: 2.25rem;
  --ds-feature-icon-bg: var(--ds-color-surface);

  /* ---- Code / reference row panels (comic) ------------------------ */
  --ds-panel-border-width: var(--ds-border-width-bold);
  --ds-panel-border-color: var(--ds-black);
  --ds-panel-radius: var(--ds-radius);
  --ds-panel-shadow: var(--ds-shadow-comic);
  --ds-panel-heading: var(--ds-color-accent);
  --ds-panel-gap: var(--ds-space-lg);

  /* ---- Button / CTA (comic) --------------------------------------- */
  --ds-btn-height: 2.5rem;
  --ds-btn-padding-x: 1.5em;
  --ds-btn-weight: var(--ds-weight-medium);
  --ds-btn-border-width: var(--ds-border-width-bold);
  --ds-btn-radius: var(--ds-radius);
  --ds-btn-shadow: var(--ds-shadow-comic);
  --ds-btn-shadow-pressed: var(--ds-shadow-comic-pressed);
  --ds-btn-lift: var(--ds-lift);
  --ds-btn-press: var(--ds-press);

  /* Primary CTA = gold */
  --ds-btn-primary-bg: var(--ds-color-accent);
  --ds-btn-primary-bg-hover: var(--ds-color-accent-hover);
  --ds-btn-primary-bg-active: var(--ds-color-accent-active);
  --ds-btn-primary-fg: var(--ds-color-on-accent);

  /* Secondary CTA = blue */
  --ds-btn-secondary-bg: var(--ds-blue-500);
  --ds-btn-secondary-bg-hover: var(--ds-blue-600);
  --ds-btn-secondary-bg-active: var(--ds-blue-700);
  --ds-btn-secondary-fg: var(--ds-ink-900);
  --ds-btn-secondary-shadow: var(--ds-shadow-comic-soft);

  /* ---- Card -------------------------------------------------------- */
  --ds-card-bg: var(--ds-color-surface);
  --ds-card-border: var(--ds-color-border);
  --ds-card-radius: var(--ds-radius);
  --ds-card-shadow: var(--ds-shadow-card);

  /* ---- Comic decorative box --------------------------------------- */
  --ds-box-drop: var(--ds-drop-comic);
  --ds-box-border: var(--ds-border-width-bold) solid var(--ds-black);

  /* ---- Navigation bar --------------------------------------------- */
  --ds-nav-bg: var(--ds-color-nav-bg);
  --ds-nav-border: var(--ds-color-nav-border);
  --ds-nav-blur: blur(10px);

  /* ---- Code block ------------------------------------------------- */
  --ds-code-radius: var(--ds-radius);
  --ds-code-font: var(--ds-font-mono);

  /* ---- Hero title (comic "Main Title" — Figma spec) --------------- */
  /* Figma exact: 96px / 90% / #93C5FD, 4px #0F172A outline + shadow.
     Mapped to nearest existing primitives here (blue-200 / navy-900). */
  /* Mobile floor read off the mobile mockup: 60px gives the measured 45px
     cap height. Desktop peak still to be confirmed against Home-desktop. */
  /* px, not rem: Pico scales the root font-size up at wide breakpoints,
     which made the rem ceiling resolve to 120px instead of the intended
     96px. Desktop mockup cap height is 70px -> ~93px font. */
  --ds-title-size: clamp(62px, 8vw, 96px);
  --ds-title-leading: 0.9; /* Figma line-height 90% */
  /* Read off the Home mockups 2026-08-19: the two "nearest" approximations
     below were placeholders and are now the exact design values. The hero
     headline alternates line colours -- line 1 blue, the rest gold. */
  --ds-title-color: var(--ds-color-title);
  --ds-title-color-alt: var(--ds-color-title-alt);
  --ds-title-ink: var(--ds-color-outline);
  /* Doubled: Figma strokes are strokeAlign OUTSIDE, -webkit-text-stroke
     centres. Shadow is a filter, not text-shadow, which the stroke would hide. */
  --ds-title-outline-width: 6px; /* Figma 3px OUTSIDE */
  --ds-title-drop: drop-shadow(3px 3px 0 var(--ds-title-ink));
  --ds-title-shadow: 4px 4px 0 var(--ds-title-ink);
}

@media (min-width: 992px) {
  :root {
    --ds-title-outline-width: 8px; /* Figma 4px OUTSIDE */
    --ds-title-drop: drop-shadow(4px 4px 0 var(--ds-title-ink));
  }
}