/* tokens.css — the design system. Roles only; components never use raw hex.
   Signal palette: warm near-black, one orange accent for chrome, and three
   validated hues for the physics. See design/theme.js for the reasoning. */

:root {
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type. 13px floor — nothing on this site is smaller, canvas labels included. */
  --fs-xs: 13px; --fs-sm: 15px; --fs-base: 17px; --fs-lg: 20px;
  --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-hero: 44px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;

  /* dark (default) */
  --surface: #131210;
  --card: #1c1a17;
  --card-hover: #26231f;
  --input: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.20);
  --border-soft: rgba(255,255,255,0.10);
  --hover: rgba(255,255,255,0.06);

  --ink: #ffffff;
  --ink-strong: rgba(255,255,255,0.80);
  --ink-muted: rgba(255,255,255,0.60);
  --ink-faint: rgba(255,255,255,0.40);

  --accent: #ea580c;
  --accent-hi: #f97316;
  --accent-soft: rgba(234,88,12,0.14);
  --on-accent: #131210;

  /* ── the physics palette ────────────────────────────────────────────
     Five hues across the spectrum, assigned in this fixed order. Validated
     all together under protanopia, deuteranopia and tritanopia:
       worst adjacent pair  magenta <-> cyan   dE 10.3   (floor 8)
       normal vision        violet  <-> magenta dE 26.4  (floor 15)
       lightness, chroma and contrast all inside band
     The order matters — it is what keeps the weakest pair (green/magenta)
     from ever being neighbours. Re-run the check before changing any of them.

     Velocity, displacement and acceleration take the three best-separated
     hues because they appear side by side. Magenta and green go to the second
     object and to markers, which rarely sit next to each other. */
  /* Velocity gets TWO shades of the one hue, and the difference is a
     hierarchy rather than a decoration. The traced trajectory is where the
     object has been — a long stroke, drawn in --vel. The velocity vector is
     what it is doing now, one short arrow, and it takes --vel-vec: the shade
     with more contrast against this theme's background, so it reads as the
     live quantity sitting on top of its own history. Same hue, so the colour
     still says "velocity"; different value, so the two never merge. */
  --vel:    #ea580c;     /* velocity, and the path it has flown — orange */
  --vel-vec: #fb923c;    /* the vector now — lighter, for a night sky */
  --disp:   #0891b2;     /* displacement      — cyan    */
  --acc:    #7c3aed;     /* acceleration      — violet  */
  --second: #db2777;     /* a second object   — magenta */
  --mark:   #16a34a;     /* targets, fences, lines — green */

  --good: #34d399; --good-fill: rgba(52,211,153,0.15);
  --bad:  #fb7185; --bad-fill:  rgba(251,113,133,0.15);

  /* The grid is meant to be READ, not merely sensed. 7% was invisible. */
  --grid:       rgba(255,255,255,0.13);
  --grid-major: rgba(255,255,255,0.26);
  --axis:       rgba(255,255,255,0.45);
  --shadow: none;
}

:root[data-theme='light'] {
  --surface: #f1efea;   /* warm off-white — easier to look at than near-white */
  --card: #ffffff;
  --card-hover: #f7f5f1;
  --input: rgba(26,23,20,0.035);
  --border: rgba(26,23,20,0.14);
  --border-soft: rgba(26,23,20,0.07);
  --hover: rgba(26,23,20,0.045);

  --ink: #1a1714;
  --ink-strong: rgba(26,23,20,0.75);
  --ink-muted: rgba(26,23,20,0.62);   /* raised from 0.60 to clear AA on paper */
  --ink-faint: rgba(26,23,20,0.50);   /* raised from 0.40, which failed at 2.4:1 */

  --accent: #c2410c;
  --accent-hi: #9a3412;
  --accent-soft: rgba(194,65,12,0.10);
  --on-accent: #ffffff;

  --vel:    #c2410c;   /* orange. Legibility comes from the path's casing stroke,
                          not from darkening the hue until it stops being orange. */
  --vel-vec: #7c2708;  /* the vector now — deeper, for a daylight sky */
  --disp:   #0891b2;
  --acc:    #6d28d9;
  --second: #be185d;
  --mark:   #15803d;
  --good: #047857; --good-fill: rgba(52,211,153,0.18);
  --bad:  #be123c; --bad-fill:  rgba(251,113,133,0.18);

  --grid:       rgba(26,23,20,0.11);
  --grid-major: rgba(26,23,20,0.22);
  --axis:       rgba(26,23,20,0.45);
  --shadow: 0 1px 2px rgba(26,23,20,0.045);
}

/* ── the place the motion happens in ──────────────────────────────────
   A football stadium and the district round it, at 1 unit = 1 metre.

   TIME OF DAY. Light is a late-afternoon match — the sun low in the west, a
   warm band along the horizon, long shadows and cool sky-light filling them.
   Dark is a floodlit night. Both are lit scenes with a key and a fill, not
   flat fields of grey, because a place with no light in it has no depth.

   THREE VALUE BANDS carry the section drawing, and they are the whole reason
   a three-tier stand is legible at a glance. A section cuts material, and the
   three roles sit at least 2:1 apart in value:

     --structure-dark   cut material (poché)
     --seat             raked seating
     --interior         the volume behind the cut

   On paper the poché is darkest and the volume behind is lightest. At night
   that order inverts, and has to: against a near-black sky the darkest
   possible poché is invisible, so after dark the cut material is the LIGHTEST
   of the three — it is the edge catching the floodlights — and the unlit
   volume behind it is the darkest. Same convention, read by another light.

   COLOUR. Scenery may be colourful; it may not be LOUD. Everything here is
   held under about 35% saturation and away from the five physics hues, and
   the trajectory carries a casing stroke so it wins over any of it. The one
   hue kept on a short lead is warm orange-red: a district of orange roofs is
   a district arguing with the velocity vector. */
:root {
  /* night */
  --sky-top: #05070e; --sky-mid: #0a1020; --sky-bottom: #182440; --haze: #182440;
  --sun: #ffe9b8; --sun-glow: rgba(255,228,170,0.40);
  --shadow: rgba(0,0,0,0.42); --sky-fill: #2a3a58;
  --earth: #1c1c23; --interior: #1a1a23; --terrain: #1f2622;
  --grass: #3f7a4a; --grass-alt: #2f6239; --runoff: #28472f;
  --pitchline: rgba(255,255,255,0.80);
  --concrete: #2e3139; --paving: #282c33; --asphalt: #1b1e24;
  --roadline: rgba(255,255,255,0.45); --ballast: #232630;
  --brick: #3b2f2a; --render: #3a3630; --panel: #2a333c;
  --roofing: #221e1e; --roofing-alt: #1c1a1b; --window: #ffd98a;
  --glass: rgba(132,163,188,0.26); --metal: #5a616b; --net: rgba(255,255,255,0.30);
  --seat: #3f4652; --seat-alt: #363d47; --seat-hi: #4b5565; --board: #4f5560;
  --structure: #6d7684; --structure-dark: #5c6572;
  --roof-top: #3e444e; --roof-under: #1c1f26;
  --prop: #70757d; --water: #16222b; --park: #22361f; --park-alt: #1c2d1a;
  --park-deep: #15220f; --trunk: #2b2520; --tyre: #121316;

  /* The object is a BALL, so it is drawn as one: lit from above-left, with a
     seam and a rim. It is not a quantity and so does not take a quantity's
     hue — a flat disc in velocity orange was the main reason the whole scene
     read as a single colour. Floodlit at night, daylight by day, but leather
     either way, so the four tones barely move between the themes. */
  --ball-hi: #fffdf6; --ball: #e9e1cf; --ball-low: #8d8370; --ball-line: #241e17;
  --flood: #ffeec2; --far-grid: rgba(255,255,255,0.14);
  /* traffic, at night */
  --car-a: #6a7079; --car-b: #4d5259; --car-c: #7d828a;
  --car-d: #3f4a5e; --car-e: #3d4f45;
  --night: 1;
}

:root[data-theme='light'] {
  /* late afternoon */
  --sky-top: #4a86bd; --sky-mid: #a6c8e2; --sky-bottom: #f0cfa8; --haze: #e7dcc8;
  --sun: #ffeacb; --sun-glow: rgba(255,206,138,0.50);
  --shadow: rgba(54,42,30,0.26); --sky-fill: #b9d2e8;
  --earth: #6e675d; --interior: #b6ad9a; --terrain: #9fae86;
  --grass: #76a660; --grass-alt: #5e8b4d; --runoff: #567e46;
  --pitchline: rgba(255,255,255,0.95);
  --concrete: #b6b0a4; --paving: #c3c0b6; --asphalt: #8b8884;
  --roadline: rgba(255,255,255,0.92); --ballast: #a79f93;
  --brick: #a9705f; --render: #d9cdba; --panel: #8fa0a8;
  --roofing: #6b5a52; --roofing-alt: #574f4b; --window: #ffe6ad;
  --glass: rgba(176,205,224,0.55); --metal: #9ca4ab; --net: rgba(255,255,255,0.78);
  --seat: #65707f; --seat-alt: #5f6975; --seat-hi: #828d9b; --board: #8e887c;
  --structure: #cbc2b2; --structure-dark: #4a4238;
  --roof-top: #b4bac1; --roof-under: #7b8086;
  --prop: #5d564e; --water: #7fa8bf; --park: #7fa75f; --park-alt: #6e9450;
  --park-deep: #5a7f41; --trunk: #74604d; --tyre: #2b2824;
  --ball-hi: #ffffff; --ball: #ece5d6; --ball-low: #a2957f; --ball-line: #3d352b;
  --flood: #fff6df; --far-grid: rgba(26,23,20,0.16);
  /* traffic: silver, graphite, white, navy, bottle green. No reds — red at
     this size reads as a velocity vector from across the room. */
  --car-a: #b9bcc0; --car-b: #6a6e73; --car-c: #e3e2de;
  --car-d: #41506b; --car-e: #3f5c4a;
  --night: 0;
}