/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — Construction Santorini
   The only place a raw value is allowed to exist. Everything else references it.

   Art direction: "Industry" (light blueprint) — locked 2026-08-10.
   Replaces "The Snapped Line". The page is a light technical ground; objects are
   transparent line drawings with hairline borders and corner registration marks;
   one steel-blue accent carries every route, link and focus state; the only
   filled object on a page is the primary button, and the only dark surface is
   the accent-900 CTA plate.

   Colour rule, the one that gets broken:
     --steel (#5980a6) on --ground is 3.71:1 — fine for a border, a rule or a
     drawn line (WCAG 1.4.11 wants 3:1 for non-text), FORBIDDEN for text.
     Small accent text uses --steel-700 (#416180, 5.78:1). Always.
     The primary button is filled with --steel-700, not --steel, for the same
     reason: paper on --steel is 3.71:1 and its label is 14px.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 1. PALETTE ───────────────────────────────────────────────────────────
     A neutral ground, one ink, one accent with a nine-step ramp. Nothing else.
     The ramps are generated in OKLCH on one shared lightness scale, so the same
     step of any role matches the others in visual value.                      */

  --ground:      #F2F2F3;   /* page ground — light-dominant                    */
  --surface:     #E9E9EA;   /* raised light surface: inputs, drawing backdrops */
  --ink:         #1D1F20;   /* body text                                       */
  --steel:       #5980A6;   /* THE signal — non-text uses only                 */

  /* Neutral ramp — greys that sit on the same lightness scale as the steel. */
  --n-100:#F5F5F8; --n-200:#E7E7EA; --n-300:#D4D4D7; --n-400:#B7B7BA;
  --n-500:#98989B; --n-600:#7A7A7D; --n-700:#5D5D60; --n-800:#424244;
  --n-900:#2B2B2D;

  /* Steel ramp. 100 is the hover tint, 700 the text-safe step, 900 the field. */
  --steel-100:#EEF6FF; --steel-200:#D6EBFF; --steel-300:#B5D9FD;
  --steel-400:#94BCE3; --steel-500:#749DC4; --steel-600:#597EA3;
  --steel-700:#416180; --steel-800:#2C455D; --steel-900:#1D2D3D;

  /* Ink at a percentage. Secondary text is never a new grey — it is the ink,
     thinned, so a single ink change moves the whole page together.            */
  --ink-2:  color-mix(in srgb, var(--ink) 78%, transparent);   /* secondary     */
  --ink-3:  color-mix(in srgb, var(--ink) 70%, transparent);   /* captions      */
  --ink-4:  color-mix(in srgb, var(--ink) 55%, transparent);   /* marks, hints  */

  /* Hairlines. One weight, one alpha, everywhere: 1px of ink at 16%. */
  --hair:   color-mix(in srgb, var(--ink) 16%, transparent);
  --hair-2: color-mix(in srgb, var(--ink) 30%, transparent);  /* emphatic rule */
  --tint:   var(--steel-100);                                 /* row hover     */

  /* Reversed set — for the one dark object on the site, the CTA plate. */
  --rev:    var(--ground);                                     /* type on dark  */
  --rev-2:  color-mix(in srgb, var(--ground) 82%, transparent);
  --rev-3:  color-mix(in srgb, var(--ground) 70%, transparent);
  --rev-hair: color-mix(in srgb, var(--ground) 25%, transparent);

  /* ── 1b. LEGACY ALIASES ───────────────────────────────────────────────────
     The dark theme's names, remapped onto the light ground. They are kept
     because content/*.js carries inline SVG and inline styles that reference
     them by name — the reskin does not touch content. Every one of these
     resolves to a value that is legible on --ground. Do not add new ones;
     do not reference these in new rules.                                      */

  --basalt:      var(--steel-900);   /* was the page ground; now the deep field */
  --scoria:      var(--surface);
  --scoria-2:    #DEDEE1;
  --whitewash:   #FFFFFF;            /* the render sweep in the build drawing   */
  --wash-2:      var(--surface);
  --dust:        var(--n-700);       /* drawing strokes, secondary text         */
  --chalk:       var(--steel);       /* the signal, non-text                    */
  --chalk-up:    var(--steel-700);   /* the signal, text-safe                   */
  --marking:     var(--steel-700);   /* used by the contact tables in pages-2   */
  --rule-d:      var(--hair);
  --rule-d2:     var(--hair-2);
  --rule-l:      var(--hair);
  --rule-l2:     var(--hair-2);
  --chalk-ghost:   color-mix(in srgb, var(--steel) 18%, transparent);
  --chalk-ghost-d: color-mix(in srgb, var(--steel) 18%, transparent);

  /* ── 2. TYPE ──────────────────────────────────────────────────────────────
     Display: Barlow Condensed 600 — uppercase, tracked open. Latin only.
     Body:    Barlow 400/600.                                Latin only.
     Greek:   Barlow has no `greek` subset on Google Fonts, so the Greek-capable
              faces already in assets/fonts/ sit second in each stack. Per-
              character fallback does the rest: Latin renders in Barlow, Greek in
              Fira Sans Condensed / Commissioner, on the same page, with no
              build-time branching and no page that silently loses its accents.
     Utility: no third face. The old mono role is Barlow with tabular figures —
              `.mono` still exists and still means "figures line up".           */

  --f-disp: 'Barlow Condensed', 'Fira Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Barlow', 'Commissioner', system-ui, 'Segoe UI', sans-serif;
  --f-mono: var(--f-body);

  --w-disp: 600;   /* the display weight. One weight; hierarchy is size + tracking. */

  /* Scale, in px-derived rem so the spec's px values survive the translation. */
  --t--2: .8125rem;    /* 13px  kickers, captions, blurbs, register numbers   */
  --t--1: .875rem;     /* 14px  buttons, nav, stat labels                     */
  --t-0:  .9375rem;    /* 15px  body                                          */
  --t-prose: 1rem;     /* 16px  long-form reading surface only — see below    */
  --t-1:  1.0625rem;   /* 17px  lede, hero sub                                */
  --t-2:  1.375rem;    /* 22px  h3                                            */
  --t-3:  2rem;        /* 32px  h2                                            */
  --t-stat: 2.75rem;   /* 44px  spec-plate numerals                           */
  --t-4:  clamp(2rem, 1.25rem + 2.6vw, 3.25rem);    /* h1, inner pages        */
  --t-5:  clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem); /* section statements     */
  --t-6:  clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);    /* homepage h1 only       */

  /* 15px is the design system's body size and it is right for the chrome, the
     registers and the ruled lists. It is not right for 264,000 words of
     long-form: the guides and service pages set their prose at --t-prose. */

  --tr-disp:  .01em;   /* display tracking, large — condensed caps open up      */
  --tr-sign:  .08em;   /* kicker / label tracking, uppercase, always            */
  --tr-head:  .02em;   /* section headings                                      */
  --tr-name:  .04em;   /* register entries, trade names                         */

  --lh-hero: 1.04;
  --lh-head: 1.12;
  --lh-body: 1.6;

  --measure: 66ch;     /* prose measure. Never exceeded.                        */

  /* ── 3. SPACE + MEASURE ───────────────────────────────────────────────────
     24px is the leading unit; 12px the half-step; 64px the section rhythm.   */
  --s1: .375rem;  --s2: .75rem;  --s3: 1.5rem;
  --s4: 2.5rem;   --s5: 4rem;    --s6: 6rem;
  --sec: clamp(2.5rem, 5vw, 4rem);                   /* section rhythm       */
  --gut: clamp(1.25rem, 5vw, 4.5rem);                /* gutter — 20 → 72px   */
  --wrap: 75rem;                                     /* 1200px               */
  --wrap-n: 54rem;                                   /* prose column         */

  /* ── 4. THE FRAME ─────────────────────────────────────────────────────────
     Every framed object is the same object: a 1px hairline box with a "+"
     registration mark straddling each corner. Drawn entirely in CSS on two
     pseudo-elements, so no template carries four spacer spans.               */
  --mark:     15px;                    /* arm length of the "+"               */
  --mark-mid: 7px;                     /* its centre — keep at (mark - 1) / 2 */
  --mark-ink: var(--ink-4);            /* 55% ink                             */

  /* ── 5. MOTION ────────────────────────────────────────────────────────────
     The light theme is still. What remains is state feedback — hover tints,
     focus, the accordion — and it is fast and mechanical. No scroll-driven
     motion, no parallax, no overshoot.                                       */

  --e-snap: cubic-bezier(.2, 0, .2, 1);      /* state change, mechanical      */
  --e-draw: cubic-bezier(.65, 0, .35, 1);    /* a line being drawn            */
  --e-lift: cubic-bezier(.33, .9, .28, 1);   /* surfaces arriving             */
  --e-off:  cubic-bezier(.4, 0, 1, 1);       /* exits only                    */

  --d-tap:   70ms;    /* press — below perceptual threshold        */
  --d-snap: 120ms;    /* hover, focus, tint                        */
  --d-move: 220ms;    /* panels, accordion, step transitions       */
  --d-route:360ms;    /* the longest thing that moves              */

  /* ── 6. FORM + FOCUS ──────────────────────────────────────────────────── */
  --focus-w: 2px;
  --radius: 0;          /* zero everywhere. Radius is not a design decision here. */
  --radius-field: 2px;  /* the single exception: form controls                   */
}

/* Reduced motion is a token-level concern, not a component-level afterthought. */
@media (prefers-reduced-motion: reduce){
  :root{
    --d-tap: 1ms; --d-snap: 1ms; --d-move: 1ms; --d-route: 1ms;
    /* 1ms, not 0 — `0` never fires transitionend and breaks JS that waits on it. */
  }
}

/* Forced-colours (Windows high contrast): surrender our palette, keep structure. */
@media (forced-colors: active){
  :root{
    --hair: CanvasText; --hair-2: CanvasText;
    --rule-d: CanvasText; --rule-d2: CanvasText;
    --rule-l: CanvasText; --rule-l2: CanvasText;
    --mark-ink: CanvasText;
  }
}