/* ==========================================================================
   Crowd Science design tokens (PLAN §5.3.2)
   --------------------------------------------------------------------------
   Every colour, size and font on the site comes from here. Components and
   sims read these custom properties; never hard-code a hex value elsewhere
   (SVG figures use var(--…) in fill/stroke so they follow the theme).

   Deviations from the plan's token block (all for WCAG AA contrast):
   - --ink-3 light #78818C → #5F6771, dark #7E868F → #8A929B
   - --warn light #B84A00 → #A84300 (4.98:1 on --warn-soft)
   - --ok light #1F7A4D → #1B7045 (5.1:1 on --ok-soft)
   - --los-e #D4512B → #C2461F (white ink 5.0:1)
   - --los-ink-* replaced by per-letter --los-X-ink (white fails on D)
   - Type scale is expressed relative to --fs-base (18px desktop, 17px
     below 640px) so that 1rem stays 16px and the layout tokens keep the
     pixel sizes the plan annotates (44rem ≈ 704px).
   ========================================================================== */

:root {
  /* ground and surfaces */
  --bg: #F2F4F1;          /* cool concourse grey */
  --surface: #FFFFFF;     /* cards, sim frames */
  --surface-2: #E8EBE6;   /* inset panels, table stripes */
  --ink: #1B1F24;
  --ink-2: #4A525C;       /* secondary text */
  --ink-3: #5F6771;       /* captions, hints */
  --line: #D3D8D1;
  --line-strong: #B4BBB2;

  /* accent: ultramarine */
  --accent: #2746D1;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3E8FA;
  --accent-hover: #1D37AD;

  /* status */
  --warn: #A84300;        /* hi-vis orange, darkened for contrast */
  --warn-soft: #FFE4D1;
  --hivis: #F06A00;       /* decorative hi-vis (strokes, never text) */
  --ok: #1B7045;
  --ok-soft: #DCF1E4;
  --danger: #A8201A;
  --danger-soft: #F8DEDC;

  /* density / Level of Service scale (A → F), luminance decreasing */
  --los-a: #D8E9F6;
  --los-b: #A9C9E9;
  --los-c: #EFC46A;
  --los-d: #E98B3A;
  --los-e: #C2461F;
  --los-f: #8E1B1B;
  --los-a-ink: #1B1F24;
  --los-b-ink: #1B1F24;
  --los-c-ink: #1B1F24;
  --los-d-ink: #1B1F24;
  --los-e-ink: #FFFFFF;
  --los-f-ink: #FFFFFF;
  --los-ink-on-light: #1B1F24; /* kept for plan compatibility (A–D) */
  --los-ink-on-dark: #FFFFFF;  /* kept for plan compatibility (E–F) */

  /* crowd dots in figures and sims */
  --dot: #1B1F24;
  --dot-muted: #9AA39A;

  --focus: #2746D1;

  /* radii */
  --r-1: 4px;   /* controls */
  --r-2: 10px;  /* frames, cards */

  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* layout */
  --measure: 66ch;
  --content: 44rem;   /* ~704px */
  --wide: 60rem;      /* ~960px: figures, sims */
  --sidebar: 16rem;
  --margin-col: 14rem;
  --gutter: 16px;
  --header-h: 60px;

  /* type */
  --font-body: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --fs-base: 1.125rem;  /* 18px */
  --fs--2: calc(var(--fs-base) * .72);
  --fs--1: calc(var(--fs-base) * .84);
  --fs-0: var(--fs-base);
  --fs-1: calc(var(--fs-base) * 1.25);
  --fs-2: calc(var(--fs-base) * 1.5625);
  --fs-3: calc(var(--fs-base) * 1.953);
  --fs-4: calc(var(--fs-base) * 2.441);
  --fs-5: clamp(2.6rem, 5vw, 3.6rem);
  --lh-body: 1.6;

  /* motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 150ms;

  color-scheme: light dark;
}

@media (max-width: 639.98px) {
  :root { --fs-base: 1.0625rem; /* 17px */ }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --surface: #1A1D21; --surface-2: #22262B;
    --ink: #E7E9E4; --ink-2: #AEB5BD; --ink-3: #8A929B; --line: #30363D;
    --line-strong: #464E57;
    --accent: #8FA6FF; --accent-ink: #0F1430; --accent-soft: #1E2748; --accent-hover: #B0C0FF;
    --warn: #FF9A4D; --warn-soft: #3A2412; --hivis: #FF8A2A;
    --ok: #5FC48E; --ok-soft: #10301F;
    --danger: #FF7B73; --danger-soft: #3B1715;
    --los-f: #B23A3A; --focus: #8FA6FF;
    --dot: #E7E9E4; --dot-muted: #59615A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #121417; --surface: #1A1D21; --surface-2: #22262B;
  --ink: #E7E9E4; --ink-2: #AEB5BD; --ink-3: #8A929B; --line: #30363D;
  --line-strong: #464E57;
  --accent: #8FA6FF; --accent-ink: #0F1430; --accent-soft: #1E2748; --accent-hover: #B0C0FF;
  --warn: #FF9A4D; --warn-soft: #3A2412; --hivis: #FF8A2A;
  --ok: #5FC48E; --ok-soft: #10301F;
  --danger: #FF7B73; --danger-soft: #3B1715;
  --los-f: #B23A3A; --focus: #8FA6FF;
  --dot: #E7E9E4; --dot-muted: #59615A;
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

body { background: var(--bg); color: var(--ink); }