/* T4b-1 (helper H47, 2026-10-14): THE ONE shared token file for the customer site (DESIGN.md "Design tokens ... in one CSS file").
   Ported from the owner-approved round-2 mockup (CC-Reports/T4b-mockups-r2/assets/tokens.css, H35 + H42): every token name and value is
   kept, so the contrast tables in that mockup's site/NOTES.md hold for this build. Two deliberate differences:
     - no @font-face here: /brand/brand.css (loaded first on every customer page) already declares the same five self-hosted faces;
     - served first-party from the app's /static mount (webapp/static/tokens.css), next to customer.css, so it ships with the webapp
       tree of whichever environment is deployed (see docs/t4b1-build-notes.md "Where the tokens live").
   No colour or size is hard-coded outside this file (shell.css / site-pages.css read tokens only). CSP: a plain 'self' stylesheet. */
:root {
  /* ---------------------------------------------------------------- colour: brand base (DESIGN.md; unchanged) */
  --c-orange: #E2610F;        /* actions, focus, live state: FILLS, RULES, ICONS and the focus ring only. 3.26:1 on off-white = not for text */
  --c-orange-tint: #F07D2C;   /* orange on dark: text on --c-graphite-deep 4.98:1 (passes); on --c-graphite only 4.37:1, so small orange
                                 text sits on --c-graphite-deep, never on --c-graphite */
  --c-graphite: #34373C;      /* text, dark panels */
  --c-off-white: #F6F6F5;     /* background */
  --c-muted: #9AA0A7;         /* graphics/rules on light; TEXT only on dark (5.16:1 on --c-graphite-deep) — 2.44:1 on off-white */
  --c-line: #E2E2E0;

  /* ---------------------------------------------------------------- colour: added by H35 */
  /* text-safe orange (pick-list item 8): the deeper tone for orange TEXT and for button fills that carry white text */
  --c-orange-text: #B84A00;         /* 4.83:1 on off-white, 5.23:1 on white; white on it 5.23:1 */
  --c-orange-text-hover: #A84300;   /* 5.60:1 on off-white; white on it 6.06:1 */
  --c-orange-text-press: #8F3900;   /* white on it 7.63:1 */
  --c-orange-wash: #FBEDE3;         /* faint orange surface for live chips (B84A00 on it: see NOTES) */
  --c-graphite-deep: #2B2E33;       /* footer, HUD panels (the surface orange-tint text passes on) */
  --c-graphite-line: #44474D;       /* rules on dark surfaces */
  --c-surface: #FFFFFF;             /* cards on the off-white page */
  --c-surface-2: #ECECEA;           /* disabled fills, photo placeholders (no orange text on it: 4.42:1) */
  --c-line-strong: #C9CAC7;         /* card borders, input borders (non-text) */
  --c-ink: #2A2D31;                 /* body text on light: 12.79:1 on off-white */
  --c-ink-2: #4A4D53;               /* secondary body: 7.84:1 on off-white, 8.48:1 on white */
  --c-text-muted: #62666C;          /* captions, hints, disabled labels: 5.34:1 on off-white, 5.77:1 on white, 4.88:1 on surface-2 */
  --c-on-dark: #ECEDEF;             /* 11.63:1 on graphite-deep, 10.20:1 on graphite */
  --c-on-dark-2: #C7CACF;           /* 8.29:1 on graphite-deep, 7.27:1 on graphite */
  --c-on-dark-muted: #9AA0A7;       /* = --c-muted; 5.16:1 on graphite-deep, 4.53:1 on graphite */
  --c-white: #FFFFFF;
  --c-focus: #E2610F;               /* focus ring: 3.26:1 vs off-white, 3.53:1 vs white (>= 3:1 non-text) */
  --c-focus-on-dark: #F07D2C;       /* 4.98:1 vs graphite-deep */
  --c-link: var(--c-orange-text);
  --c-link-hover: var(--c-orange-text-press);
  --c-hud-grid: rgba(240, 125, 44, .07);   /* HUD panel grid lines (decorative) */
  --c-scrim: rgba(43, 46, 51, .35);        /* behind the open mobile menu */
  /* placeholder-marker colours: the visible [PLACEHOLDER — Marketing to write] markers (t4b_copy.PLACEHOLDER). Nothing that
     uses them may ship: Marketing's strings replace every marker before deploy */
  --c-note-bg: #FBEFD0;
  --c-note-ink: #5C4300;            /* 8.13:1 on --c-note-bg */
  --c-note-line: #D9B85C;

  /* ---------------------------------------------------------------- type */
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* one scale (pick-list item 9: h1 40/34 mobile, h2 24+, h3 19, body 16–17); the display size is the home hero only */
  --fs-display: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);    /* 40 -> 56 px */
  --fs-h1: clamp(2.125rem, 1.85rem + 0.9vw, 2.5rem);        /* 34 -> 40 px */
  --fs-h2: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);         /* 24 -> 30 px */
  --fs-h3: 1.1875rem;                                        /* 19 px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);     /* 18 -> 20 px */
  --fs-body: 1.0625rem;                                      /* 17 px */
  --fs-small: 0.9375rem;                                     /* 15 px */
  --fs-label: 0.8125rem;                                     /* 13 px mono labels, kickers, readouts */
  --fs-readout: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);    /* 28 -> 36 px mono numbers in the HUD strip */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.6;
  --ls-tight: -0.01em; --ls-label: 0.12em; --ls-wordmark: 0.18em;

  /* ---------------------------------------------------------------- spacing (4 px base) */
  --s-0: 0; --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;
  --gutter: clamp(16px, 4vw, 32px);          /* page side gutter: 16 px on a 390 px phone */
  --section-y: clamp(48px, 6vw, 96px);       /* vertical rhythm between sections */

  /* ---------------------------------------------------------------- layout */
  --w-max: 1200px;      /* content width */
  --w-prose: 68ch;      /* reading measure */
  --w-lead: 44ch;
  --w-card-min: 260px;  /* auto-fit card grid minimum */
  --h-header: 72px;
  --mark-header: 48px;  /* full reticle mark >= 48 px (brand rule); below that the simplified mark */
  --mark-footer: 36px;
  --mark-hud: 112px;

  /* ---------------------------------------------------------------- borders, radius, shadow */
  --bw-1: 1px; --bw-2: 2px; --bw-3: 3px;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(52, 55, 60, .08);
  --shadow-2: 0 6px 24px rgba(52, 55, 60, .12);
  --shadow-3: 0 16px 40px rgba(43, 46, 51, .22);
  --bracket: 14px;      /* HUD corner-bracket arm length */

  /* ---------------------------------------------------------------- touch + focus */
  --tap-min: 44px;      /* every control and stacked link row (pick-list item 10) */
  --focus-width: 2px;
  --focus-offset: 3px;

  /* ---------------------------------------------------------------- z-index */
  --z-header: 50; --z-menu: 60; --z-skip: 100;

  /* ---------------------------------------------------------------- motion */
  /* plain durations (150–400 ms) for colour / opacity changes */
  --d-fast: 150ms; --d-base: 250ms; --d-slow: 400ms;
  /* Springs as CSS linear(), generated with OUR T4a M6 generator (C:\qfab-t3\repo-t4a @ 908de8e, tools/spring_linear.py, model "motion",
     28 points, run by H35 2026-10-14 with python -B; the repo was only read). Command per token:
       snap   : gen --kind spring --duration 0.08 --bounce 0   --points 28  -> 0.172s (critically damped: hover, press)
       base   : gen --kind spring --duration 0.16 --bounce 0.1 --points 28  -> 0.215s (cards, chips, menu items)
       settle : gen --kind spring --duration 0.18 --bounce 0.2 --points 28  -> 0.333s (menu panel open, ~1.5% overshoot)
     The durations below are the generator's SETTLE durations (its returned duration), all inside 150–400 ms. */
  --d-spring-snap: 172ms;
  --ease-spring-snap: linear(0, 0.0662, 0.2034, 0.3557, 0.4967, 0.6164, 0.713, 0.7884, 0.8457, 0.8885, 0.9201, 0.9431, 0.9597, 0.9716, 0.9801, 0.9861, 0.9903, 0.9932, 0.9953, 0.9968, 0.9978, 0.9985, 0.9989, 0.9993, 0.9995, 0.9997, 0.9998, 1);
  --d-spring-base: 215ms;
  --ease-spring-base: linear(0, 0.0291, 0.0996, 0.1922, 0.2937, 0.3953, 0.4914, 0.5789, 0.6564, 0.7234, 0.7802, 0.8276, 0.8665, 0.8981, 0.9233, 0.9432, 0.9588, 0.9707, 0.9797, 0.9865, 0.9914, 0.995, 0.9975, 0.9992, 1.0003, 1.001, 1.0013, 1);
  --d-spring-settle: 333ms;
  --ease-spring-settle: linear(0, 0.0531, 0.1747, 0.3232, 0.4724, 0.6076, 0.7217, 0.813, 0.8825, 0.933, 0.968, 0.9908, 1.0045, 1.0118, 1.0148, 1.015, 1.0137, 1.0116, 1.0093, 1.0071, 1.0052, 1.0036, 1.0024, 1.0014, 1.0008, 1.0003, 1, 1);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);   /* colour / opacity */
  /* motion distances (zeroed under reduced motion) */
  --lift-hover: -2px;      /* cards rise on hover */
  --press-scale: .97;      /* controls compress when pressed */
  --press-shift: 1px;
  --menu-shift: -8px;      /* the mobile menu slides down from here */
}
/* browsers without linear(): one curve per role (same durations) */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring-snap: cubic-bezier(.2, .8, .2, 1); --ease-spring-base: cubic-bezier(.2, .8, .2, 1); --ease-spring-settle: cubic-bezier(.34, 1.3, .64, 1); }
}
/* DESIGN.md: prefers-reduced-motion turns ALL motion off (durations 0, distances 0) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms;
    --d-spring-snap: 0ms; --d-spring-base: 0ms; --d-spring-settle: 0ms;
    --lift-hover: 0px; --press-scale: 1; --press-shift: 0px; --menu-shift: 0px;
  }
}

/* =====================================================================================================================
   ROUND 2 (H42, 2026-10-14): the HOLOGRAM layer. APPEND-ONLY: every round-1 token above keeps its name and value, so
   readers of round 1 (H43 in quote/) keep working. New pages use the roles below. Ratios are WCAG 2.x, measured on the
   WORST composite a glass card can sit on (the void + a major AND a minor grid line + the tint at its strongest); the full
   table is in site/NOTES.md.
   ===================================================================================================================== */
:root {
  /* ---------------------------------------------------------------- the full-screen graph paper */
  --c-void: #121417;                        /* page base, edge to edge on every page */
  --c-grid-minor: rgba(240, 125, 44, .06);  /* 24 px lines (decorative) */
  --c-grid-major: rgba(240, 125, 44, .12);  /* 120 px lines (decorative). Worst point under a card = #38261B */
  --grid-minor: 24px;
  --grid-major: 120px;
  --c-vignette: rgba(0, 0, 0, .45);         /* the screen-edge darkening */

  /* ---------------------------------------------------------------- hologram glass (dark-tinted, orange-edged) */
  --c-glass: rgba(28, 22, 19, .78);         /* WITH backdrop-filter (desktop). Worst composite #372317 */
  --c-glass-flat: rgba(28, 22, 19, .90);    /* WITHOUT backdrop-filter (phones, and browsers without it). Worst #342216 */
  --c-glass-menu: #181310;                  /* menus, the menu button, the hint: OPAQUE (they sit over content; any
                                               translucency ghosted the page text through the full-screen phone menu) */
  --c-glass-tint: rgba(240, 125, 44, .10);  /* the orange wash at the top edge of a card, fading to 0 */
  --c-glass-hover: rgba(240, 125, 44, .14); /* ghost control hover fill on glass */
  --c-glass-press: rgba(240, 125, 44, .22); /* ghost control pressed fill on glass */
  --c-glass-disabled: rgba(255, 255, 255, .05);
  --c-holo-edge: rgba(240, 125, 44, .55);   /* the crisp 1 px card border */
  --c-holo-edge-soft: rgba(240, 125, 44, .28);
  --c-holo-edge-strong: #F07D2C;            /* live / selected / hover border */
  --c-holo-glow: rgba(240, 125, 44, .20);
  --c-holo-glow-strong: rgba(240, 125, 44, .38);
  --c-holo-rule: rgba(240, 125, 44, .22);   /* hairlines inside a card */
  --blur-glass: 12px;

  /* text on glass (light text on dark glass; orange text only in the two text-safe tones) */
  --c-on-glass: #F2F3F5;                    /* 13.32:1 worst */
  --c-on-glass-2: #CDD1D6;                  /* 9.64:1 worst */
  --c-on-glass-muted: #A4AAB2;              /* 6.32:1 worst */
  --c-orange-on-glass: #FF9A50;             /* orange TEXT on glass: 7.03:1 worst */
  /* --c-orange-tint #F07D2C on glass = 5.40:1 worst (passes; used for small labels too). #E2610F = 4.19:1: never text */

  /* glows */
  --glow-1: 0 0 0 var(--bw-1) rgba(240, 125, 44, .10), 0 0 18px var(--c-holo-glow);
  --glow-2: 0 0 0 var(--bw-1) rgba(240, 125, 44, .22), 0 0 28px var(--c-holo-glow-strong);
  --glow-text: 0 0 12px rgba(240, 125, 44, .35);   /* big readout numbers only */
  --shadow-glass: 0 18px 48px rgba(0, 0, 0, .45);

  /* ---------------------------------------------------------------- the floating menu button */
  --fab-size: 72px;                         /* H56 (owner M2): larger, more presence (was 56px); phones: 64px, below */
  --fab-gap: 8px;                           /* from the screen edge */
  --rail: 88px;                             /* = fab-size + 2 x fab-gap: the side rails desktop content never enters */
  --fab-step: 48px;                         /* one arrow-key step along an edge (the secondary keyboard path) */
  --fab-snap: 64px;                         /* H56 (owner M4): within this distance of an edge, a drag snaps to it */
  --menu-w: 320px;

  /* ---------------------------------------------------------------- z-index (round 2) */
  --z-fab-menu: 70; --z-fab-hint: 75; --z-fab: 80;
}
/* H56 (owner M2): the phone's menu button (no side rails on a phone) */
@media (max-width: 760px) { :root { --fab-size: 64px; } }

/* =====================================================================================================================
   ROUND 4 (H72, 2026-10-15): APPEND-ONLY, as round 2 was. The quote screen's sticky total (owner R3-1) and the scanning
   animation (the TA's VA-5).
   ===================================================================================================================== */
:root {
  --z-sticky-total: 40;     /* under the HUD bar (50), the menu (60-80) and the consent sheet (brand.css: 1000): it never covers them */
  --scan-h: 3rem;           /* the scanning bed's height (the bar travels it) */
  --scan-w: 6rem;
  --d-scan: 1600ms;         /* one sweep of the scanning bar: a progress loop, not a UI transition (zeroed under reduced motion) */
  --d-hint: 4000ms;         /* how long the spin hint stays before it fades (read by quote-hint.js from this token) */
}
@media (prefers-reduced-motion: reduce) { :root { --d-scan: 0ms; } }

/* =====================================================================================================================
   T4b-2 (H78, 2026-10-16): APPEND-ONLY, as rounds 2 and 4 were. The quote flow's two glass steps, the round-2 quote mockup's own
   values (CC-Reports/T4b-mockups-r2/quote/quote.css, H43; contrast measured there on the worst graph-paper composite):
     raised: tabs and the "Add part +" control ON the glass (a step lighter): #F07D2C 4.86:1 · #A4AAB2 5.68:1 · #F2F3F5 11.98:1;
     sunk:   the drop box, the analysing stage and the selected tab (a step darker): #F07D2C 6.45:1 · #A4AAB2 7.54:1 · #F2F3F5 15.90:1.
   ===================================================================================================================== */
:root {
  --c-glass-raised: rgba(62, 45, 34, .88);
  --c-glass-sunk: rgba(14, 12, 11, .55);
}