/* ============================================================================
   RAIL STORE — DESIGN TOKENS
   Single source of truth for the brand swap (PRD-v1 §4, §8.5, QA gate I67).
   Editing ONLY this file must change every brand colour, typeface, spacing
   value and pegboard pitch in the build.

   Provenance tags match PRD-v1 §F0.4:
     MEASURED = sampled from the reference footage (source frame noted)
     REMEDIATED = measured value failed WCAG AA and was darkened to pass;
                  the measured value is kept in the comment for the record
     RECOMMENDED = a Menashi build decision, not evidence

   Colours are held as raw channels so the pegboard/SVG can consume them.
   ========================================================================= */

:root {

  /* --- LAYOUT UNIT ----------------------------------------------------- */
  /* Every geometry and type value below is expressed as a multiple of --u.
     The reference's own unit is "% of the site viewport WIDTH", so 1vw is the
     natural base — but a bare vw breaks on a short/wide window, where the fixed
     vertical rhythm would push the ticker off-screen (§8.3). Capping the unit at
     1.7778vh (= 1vw of a 16:9 box) is exactly the PRD's "min(100vw, 177.78vh)"
     16:9 lock, expressed as a unit so the whole composition scales together. */
  --u: min(1vw, 1.7778vh);

  /* --- COLOUR ---------------------------------------------------------- */
  /* Surface: MEASURED, canonical (#DFDFDA/#E0E0DD/#DFDFDC/#E0E0E0 all collapse here) */
  --surface:          #DFDFDD;
  --surface-2:        #D6D6D3;   /* MEASURED — secondary/raised tint, and the
                                    §5.13 image-placeholder fill */

  /* Ink. --ink-strong and --ink and --ink-button all pass AA on --surface unchanged. */
  --ink-strong:       #1B1E2D;   /* MEASURED (n_0120) — wordmark. 12.39:1 */
  --ink:              #2D2E37;   /* MEASURED — product name, general strong ink. 10.10:1 */
  --ink-button:       #5A5C63;   /* MEASURED (F10 bound) — pill text. 5.00:1 */

  /* REMEDIATED tokens — measured values fail AA on --surface, so per §8.4/OQ15
     the shipped value is the lightest value that passes 4.5:1 with the measured
     hue and saturation preserved. Ratios computed, not estimated. */
  --ink-counter:      #63635F;   /* measured #7A7A75 = 3.23:1 FAIL -> 4.52:1 PASS */
  --ink-muted:        #636269;   /* measured #929198 = 2.34:1 FAIL -> 4.52:1 PASS */
  --ink-caption:      #636268;   /* measured #7C7B82 = 3.14:1 FAIL -> 4.53:1 PASS */

  --bar:              #434B6B;   /* MEASURED — marquee bar, desaturated slate-indigo */
  --bar-ink:          #B2BDD5;   /* measured #AFBAD3 = 4.39:1 FAIL -> 4.53:1 PASS */
  --capsule:          #555555;   /* MEASURED range #4A4A4A-#616161, midpoint */

  --focus:            #2D2E37;   /* RECOMMENDED (§8.4) — 2px ring in --ink-button family */

  /* Pegboard surface (PRD §5.11, F1). Pitch is MEASURED from n_0060
     (autocorrelation peak at lag 16-17, r=0.57); ring geometry is TBD in the
     footage and is a documented Menashi decision (OQ22). */
  --pegboard-pitch-x: calc(3.4 * var(--u));  /* MEASURED (±0.2) */
  --pegboard-pitch-y: calc(2.7 * var(--u));  /* MEASURED — rectangular grid, ratio 1.23:1 */
  --pegboard-ring:    rgba(0, 0, 0, 0.032);   /* RECOMMENDED (was TBD) */
  --pegboard-ring-lit:rgba(255, 255, 255, 0.13); /* RECOMMENDED — the recess highlight.
                                    Deliberately very faint: in the reference the lattice
                                    is barely perceptible at 100% and must not read as a
                                    pattern competing with the garments. */
  --pegboard-ring-size: calc(0.27 * var(--u));  /* RECOMMENDED — OQ22. Outer radius;
                                    ~16% of the pitch, which is what the reference reads at. */
  --pegboard-ring-inner: calc(0.17 * var(--u)); /* RECOMMENDED — inner radius; stroke ≈ 0.10 */
  --pegboard-inset-x: calc(1.6 * var(--u));     /* MEASURED presence / TBD value */
  --pegboard-inset-top: calc(5.2 * var(--u));
  --pegboard-inset-bottom: calc(3.4 * var(--u));

  /* --- TYPE ------------------------------------------------------------ */
  /* Two families (PRD §4.2, corrected by F5): one script (wordmark ONLY),
     one grotesque supplying roman + italic + a heavier italic. */
  --font-script:   "Kaushan Script", "Segoe Script", cursive;
  --font-grotesk:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale. OQ1 (reference viewport width) is unresolvable from the footage;
     PRD directs locking it as a documented decision. Every other reference
     measurement is consistently vw%, so the vw-based reading is taken and the
     scale is fluid, expressed in --u so it shares the 16:9 lock. */
  --type-micro:    clamp(10px, calc(0.98 * var(--u)), 15px);  /* nav, pill, counter, CLOSE, caption */
  --type-marquee:  clamp(10px, calc(1.05 * var(--u)), 16px);
  --type-body:     clamp(15px, calc(1.15 * var(--u)), 19px);  /* /about + /contact prose */
  --type-title:    clamp(22px, calc(2.40 * var(--u)), 42px);  /* page title (R2 roman, NOT script — §3.3) */
  --type-name:     clamp(15px, calc(1.90 * var(--u)), 31px);  /* product name, italic grotesque (R3) */
  --type-wordmark-1: clamp(15px, calc(1.95 * var(--u)), 34px);
  --type-wordmark-2: clamp(20px, calc(2.55 * var(--u)), 44px);

  --track-micro:   0.16em;   /* letterspacing for uppercase micro-labels */
  --track-marquee: 0.10em;
  --leading-body:  1.65;
  --measure:       62ch;     /* §3.3 — prose cap */

  /* --- SPACING --------------------------------------------------------- */
  /* RECOMMENDED 4/8 scale (PRD §4.3). The reference's own scale is not
     measurable; these are calibrated against the MEASURED anchor gaps. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- RADII ----------------------------------------------------------- */
  --radius-site:   0;        /* MEASURED — square corners, radius ≤2 ref px */
  --radius-pill:   999px;    /* MEASURED — true pill */
  --radius-circle: 50%;      /* MEASURED — prev/next controls */
  --radius-capsule: 999px;   /* MEASURED — fully rounded capsule */

  /* --- GEOMETRY (MEASURED, in vw% of the site viewport = multiples of --u) -- */
  --rail-span:        calc(74.5 * var(--u));   /* MEASURED — confirmed by the vision audit */
  --rail-tube:        calc(1.0 * var(--u));    /* MEASURED (range) */
  --rail-centre-y:    calc(15.0 * var(--u));   /* MEASURED — rail centreline, v0-15.1/audit-14.9 */
  --nav-inset:        calc(1.5 * var(--u));    /* MEASURED presence / TBD value — symmetric (F10) */
  --nav-baseline-y:   calc(2.9 * var(--u));    /* CORRECTED (F8) — v0's 11.2 was wrong by ~4x.
                                    This is the nav INK baseline; the header box sits
                                    above it by the nav padding + cap height. */
  --header-top-y:     calc(1.36 * var(--u));   /* = --nav-baseline-y minus that offset, so the
                                    measured baseline lands at ≈2.9u */
  --marquee-height:   calc(2.65 * var(--u));   /* MEASURED */
  --pill-width:       calc(11.5 * var(--u));   /* MEASURED (±2%) */
  --pill-height:      calc(2.60 * var(--u));   /* RECOMMENDED — not resolvable, sized to the pill */
  --capsule-w:        calc(2.4 * var(--u));    /* MEASURED */
  --capsule-h:        calc(0.42 * var(--u));   /* MEASURED */
  --control-d:        calc(2.85 * var(--u));   /* MEASURED range 2.6-3.1 (F10) */
  --hero-w:           calc(19.9 * var(--u));   /* MEASURED low confidence (F6/F7) — the
                                    WIDTH reading. The hero is sized by height instead:
                                    against the reference's own overlay frame the hero
                                    garment spans roughly half the card height, so the
                                    image is ~33u tall with the garment at ~82% of it. */
  --hero-img-h:       calc(33 * var(--u));
  --overlay-wash:     rgba(223, 223, 221, 0.55); /* RECOMMENDED — the reference's backdrop
                                    is a very pale, washed field, not a dark blur. */
  --garment-pitch:    calc(6.85 * var(--u));   /* MEASURED range 6.6-7.1 (F8 re-verify) */
  --garment-band-h:   calc(16.0 * var(--u));   /* MEASURED garment box height */
  /* The rendered height of a product image. Calibrated against the reference: the
     garment fabric spans 16.87 -> 41.1 vw% there (24.2 vw% tall), and the cut-out
     canvases carry a 3% top pad with the garment at ~82% of the canvas. So
     24.2 / 0.82 = 29.5u puts the fabric exactly on the measured band. */
  --garment-img-h:    calc(29.5 * var(--u));
  --garment-img-ratio-side: 0.50;  /* the cut-out canvas ratios (must match cutout.py) */
  --garment-img-ratio-front: 0.90;
  --header-block-h:   calc(3.9 * var(--u));    /* MEASURED wordmark block height */

  /* --- BORDERS --------------------------------------------------------- */
  --border-pill:    1px;     /* MEASURED "light outline", width TBD (F10) */
  --border-control: 1.5px;   /* MEASURED ~1-2 ref px */
  --border-color:   rgba(45, 46, 55, 0.42);

  /* --- MOTION (all RECOMMENDED — §6.7) --------------------------------- */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-turn:       240ms;   /* garment side -> front turn, and neighbour spread */
  --dur-hover:      140ms;   /* nav / pill / control hover */
  --dur-overlay:    280ms;   /* overlay open / close (crossfade evidenced) */
  --dur-copy:       160ms;   /* counter + name settle before the image */
  --marquee-speed:  calc(2.7 * var(--u));   /* MEASURED ±15% — per second, right -> left, linear */

  /* --- BREAKPOINTS (§8.3) --------------------------------------------- */
  --bp-mobile-max: 767px;
  --bp-tablet:     768px;
  --bp-desktop:    1200px;

  /* --- Z LAYERS -------------------------------------------------------- */
  --z-surface: 0;
  --z-rail:    10;
  --z-marquee: 45;
  --z-overlay: 60;
  --z-header:  70;
  /* The capsule is present in BOTH states (F9) and stays in place while the marquee
     fades out beneath it, so it must sit ABOVE the overlay — but below the
     newsletter dialog. */
  --z-capsule: 80;
  --z-dialog:  90;
}