/* ============================================================================
   LRT redesign — TOKEN LAYER. Everything downstream references these.
   Derived from DESIGN.md §3. No raw hex or one-off values below this file.
   ============================================================================ */
:root {
  /* --- Color: the material system (states of the process, + the tool) ------ */
  --graphite:  #16191E;   /* the dim demo bay — primary dark surface        */
  --steel-deep:#363C44;   /* shadowed metal — panels, scrolled nav, borders */
  --steel:     #CDD2D8;   /* bare cleaned metal — light surface / text-on-dark */
  --oxide:     #9E4A25;   /* iron oxide (rust) — the BEFORE state, sparingly */
  --flash:     #FDFBF4;   /* ablation plasma — edge-light, hairlines, hi-text*/
  --aperture:  #D21F27;   /* the head's Class-4 red — laser/active only      */

  /* semantic roles */
  --surface:      var(--graphite);
  --surface-2:    var(--steel-deep);
  --surface-light:var(--steel);
  --ink-on-dark:  var(--steel);
  --ink-hi:       var(--flash);
  --ink-dim:      #8790A0;          /* muted steel for secondary text on dark */
  /* --ink-dim on --surface-2 measures 3.46:1 — below the AA floor. Panels get a
     lighter muted tone (4.8:1) so secondary copy stays readable on the bands. */
  --ink-dim-panel:#A2ABB8;
  --ink-on-light: var(--graphite);
  --ink-on-light-dim: #4C5560;
  --edge:         var(--flash);
  --edge-dim:     var(--steel-deep);
  /* hairlines on --surface-2 panels: --edge-dim IS --surface-2, so it would be
     invisible there. Panels use this instead. */
  --edge-panel:   rgba(253, 251, 244, 0.18);
  --accent:       var(--aperture);
  --before:       var(--oxide);

  /* --aperture is a FILL, not a text colour. As 12px type it measures 3.33:1 on
     --surface and 2.10:1 on --surface-2 panels — both under the 4.5:1 AA floor,
     and no red can clear it: luminance high enough for 4.5:1 on the panel forces
     so much green that the hue stops being red. So small accent text gets its
     own token. #FF9E7A is 8.75:1 on --surface and 5.52:1 on panels, and it is
     the colour of the ablation spot in LRT's own footage rather than an
     arbitrary tint. White on --aperture is 5.30:1, so filled buttons are fine. */
  --accent-text:  #FF9E7A;

  /* Interactive boundaries — a control the eye has to find. --edge-dim is the
     resting hairline and measures 1.58:1 on --surface (and literally 1.00:1 on
     panels, where it IS the surface), so a secondary button had no visible edge
     and the inactive carousel dots were invisible. WCAG wants 3:1 for the
     boundary of a control; this is 4.79:1 and 3.03:1. */
  --edge-ui:      #7E8692;

  /* --oxide on the light plate is 3.99:1 — just under AA. Darkened for text use
     only; the rust fill itself is unchanged. */
  --oxide-on-light: #8A3F1F;

  /* --- Type: signage over spec-sheet -------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* the expanded display axis is a decision — applied wherever --font-display is used */
  --display-stretch: 125%;

  --t-data:    0.75rem;
  --t-data-lg: 0.8125rem;
  --t-body:    1rem;
  --t-lead:    1.125rem;
  --t-d1:      1.5rem;
  --t-d2:      2.25rem;
  --t-d3:      clamp(2.25rem, 4vw, 3.5rem);
  --t-hero:    clamp(2.85rem, 5.6vw, 4.9rem);

  --lh-display: 1.03;
  --lh-body:    1.6;
  --lh-mono:    1.4;
  --track-display: -0.01em;
  --track-mono:    0.02em;   /* spec-plate spacing */

  /* --- Space: 8px base, every margin a multiple --------------------------- */
  --s1: 0.5rem;    /*  8 */
  --s2: 1rem;      /* 16 */
  --s3: 1.5rem;    /* 24 */
  --s4: 2.5rem;    /* 40 */
  --s5: 4rem;      /* 64 */
  --s6: 6.5rem;    /* 104 */

  /* --- Structure ---------------------------------------------------------- */
  --container: 1280px;
  --gutter:    var(--s3);
  --hair:      1px;                 /* the boundary at rest */
  --nav-h:     4.5rem;              /* 72px */
  --mobar-h:   3.5rem;              /* 56px thumb bar */

  /* --- Motion budget (3 named moments) ------------------------------------ */
  --pass-dur:     1200ms;          /* The Pass  */
  --wipe-dur:      700ms;          /* Section Wipe */
  --aperture-dur:   90ms;          /* The Aperture */
  --ease-pass: cubic-bezier(0.72, 0.02, 0.24, 1);   /* a decisive sweep */
  --ease-ui:   cubic-bezier(0.4, 0, 0.2, 1);
}