/* V3 design tokens — extracted from mockups/mockup-14-scenario-led.html.
 * Every other stylesheet references these variables. Do not restate hex
 * values elsewhere. Update a color / font here to propagate site-wide.
 *
 * Namespace intent:
 *   --red / --red-dark / --red-soft ... brand accent
 *   --ink / --ink-2 ................... primary + secondary text on light
 *   --paper / --paper-2 / --paper-3 ... light-mode surfaces (page, band, card)
 *   --rule / --rule-2 ................. hairline + heavier hairline
 *   --muted / --muted-2 ............... secondary + tertiary text
 *   --sans / --serif .................. root type stacks
 *   --chrome-sans ..................... utility bar, nav, and home hero
 *   --display-serif ................... home hero headline
 *   --issue-sans / --issue-serif ...... home "In this issue" carousel
 */
:root {
  --red: #ed1c24;
  --red-dark: #c8161d;
  --red-soft: #fdecec;

  --ink: #14141a;
  --ink-2: #2a2a30;

  --paper: #ffffff;
  --paper-2: #f8f6f2;
  --paper-3: #f0ede6;

  --rule: #e6e2d9;
  --rule-2: #cfcdc6;

  --muted: #6a6862;
  --muted-2: #a1a09a;

  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --chrome-sans:
    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-serif: "DM Serif Display", Georgia, serif;
  --issue-sans:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --issue-serif: "Fraunces", "Times New Roman", Georgia, serif;
}

/* Dark theme. prefers-color-scheme is the only trigger — there is no manual
 * toggle and no JS. Redefining the same custom properties flips the whole
 * site, since every other stylesheet already consumes them. Surfaces go
 * dark, ink goes light, rules + muted text are retuned for a dark ground,
 * and the brand red is nudged up just enough to stay legible on dark.
 *
 * The intentionally-dark "inverse" panels (utility bar, metrics strip,
 * case-study card, step numerals, back-to-top, red buttons) would otherwise
 * invert to light; they are re-pinned locally in components.css / sections.css
 * so they keep a dark ground + light ink. Fonts are unchanged.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --red: #f5333a;
    --red-dark: #c8161d;
    --red-soft: #2b1416;

    --ink: #ededf2;
    --ink-2: #c4c4cd;

    --paper: #121217;
    --paper-2: #1a1a21;
    --paper-3: #22222b;

    --rule: #2c2c35;
    --rule-2: #3f3f4a;

    --muted: #9c9a92;
    --muted-2: #85837b;
  }
}