/* Khartoum Wire - design tokens for the PUBLIC SITE. Source of truth: DESIGN.md.

   This is the only file that holds colour values (DESIGN.md section 2, rule 1).
   `tools/contrast.js` reads the hex values from this file, so a palette change
   that breaks AA fails `node tools/contrast.js` instead of reaching a reader.

   The site is DARK ONLY. There is no light theme and no toggle, and
   prefers-color-scheme is deliberately not read: black is the brand, not a
   viewing preference. panel/assets/tokens.css is a separate copy that still
   has its own light block and is NOT kept identical to this file.

   ACCENT: "Nile gold" (--gold). It is the one accent and it is rationed to the
   kicker, the hairline under the masthead, the focus ring, link hover, the
   primary button and the live-pulse dot. --live (red) is reserved for the
   breaking marker; --danger for destructive actions in the panel. */
:root {
  color-scheme: dark;

  /* --- Typography --------------------------------------------------------
     System fonts only: no external request, works offline (rule 1). Display
     is a serif stack (Charter and Iowan Old Style on macOS, Georgia and
     Palatino elsewhere); the interface stays in the system sans. */
  --font-display: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --font-sans: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg: #0a0a0b;        /* page */
  --bg-2: #121214;      /* raised: boxes, page headers, promo */
  --bg-3: #1a1b1e;      /* chips, badges, input fill */
  --card: #101012;      /* story card */
  --dark: #000000;      /* footer and top bar; differs from --bg without a line */
  --dark-2: #101012;
  --app-bg: #08080a;    /* panel page background (kept for parity with the panel copy) */

  /* --- Lines (decorative; they never carry text) -------------------------- */
  --line: #26272b;
  --line-2: #1a1b1e;

  /* --- Text -------------------------------------------------------------- */
  --ink: #f2f2f3;       /* headlines, body */
  --ink-2: #b7b9bd;     /* standfirst, summary */
  --ink-3: #8b8d93;     /* date, author, labels */
  --ink-invert: #0a0a0b;
  --on-dark: #d6d7da;   /* text on --dark */
  --on-dark-2: #8b8d93;

  /* --- Accent: Nile gold ------------------------------------------------- */
  --gold: #c9a24b;      /* kicker, rules, focus ring, dot; links on hover */
  --gold-hi: #e0bd68;   /* hover / pressed */
  --gold-deep: #8a6a22; /* decorative only (thick rules, ornaments) - NOT for text */
  --on-gold: #0a0a0b;   /* text on a gold fill */

  /* --- Meaning colours: exactly two, both reserved ----------------------- */
  --live: #ff4d4f;      /* breaking marker + wire pulse, nothing else */
  --live-ink: #0a0a0b;  /* text on --live: white would be 3.27:1, this is 6.1:1 */
  --danger: #ff5f61;    /* destructive action / error */

  /* --- Status (panel pages that reuse this file) -------------------------- */
  --ok: #3fb950;
  --warn: #d99a2b;
  --info: #58a6ff;

  /* --- RGB helpers for rgba() -------------------------------------------- */
  --bg-rgb: 10, 10, 11;
  --gold-rgb: 201, 162, 75;
  --ink-rgb: 242, 242, 243;

  /* --- Vertical rhythm --------------------------------------------------- */
  --space-xs: 12px;
  --space-s: 24px;
  --space-m: 40px;
  --space-l: 56px;
  --space-xl: 72px;

  /* --- Shape ------------------------------------------------------------- */
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 32px);
  --measure: 66ch;      /* story body line length */
  --radius: 3px;
  --radius-s: 2px;
  --radius-pill: 999px; /* only for things that are round: play button, duration badge */
  /* A shadow does not read on black; depth is a hairline (DESIGN.md section 6).
     Only the overlay shadow exists, for menus. */
  --shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06), 0 20px 44px rgba(0, 0, 0, .6);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .22s;
}

/* Reduced motion: transitions and animations are switched off. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}