/* Hallmark · tokens · QuoteStack marketing site — variant 5b
 * (the merge + the apple-design pass + the copy rewrite)
 *
 * Palette and type are brand-locked (docs/briefs/site-redesign-v2.md §2) and unchanged.
 *
 * The merge, per docs/briefs/site-redesign-v3.md §1:
 *   radius  ← variant 2 (14px cards / pill CTAs)
 *   hero bg ← variant 1 (ink + graph-paper grid)
 *   mock    ← variant 3 (seamless hairline table, no drop shadow, no frame)
 *
 * The one resolution that makes those three coexist: radius lives on interactive
 * and container elements; data surfaces stay square and hairline-ruled. Hence
 * --radius-none below — it is not a fallback, it is the token that data cells,
 * dimension lines and spec rows reference on purpose.
 *
 * NEW in 5a, from .claude/skills/apple-design/SKILL.md — see
 * _review/site-redesign-v3/apple-design-audit.md for the reasoning per section:
 *   · --spring-*   §4  spring constants, read by JS via getComputedStyle
 *   · --track-*    §15 a tracking rung per type-scale step, not just the extremes
 *   · --mat-*      §12 translucent material weights
 * Hallmark's locked-token rule (gate 48) still governs: nothing inline.
 */
:root {
  /* ---- Locked palette (exact hex, per brief §2) ---- */
  --color-ink:            #17191C;
  --color-ink-rgb:         23 25 28;
  --color-panel:          #222529;
  --color-panel-rgb:       34 37 41;
  --color-paper:          #F7F5F0;
  --color-paper-rgb:       247 245 240;
  --color-amber:          #D66025;
  --color-amber-rgb:       214 96 37;
  --color-amberdark:      #A84719;
  --color-amberdark-rgb:   168 71 25;
  --color-steel:          #5C707C;
  --color-steel-rgb:       92 112 124;
  --color-rule:           #D2CBBF;
  --color-rule-rgb:        210 203 191;

  /* NEW in 5b — the ONE colour on this page that is not from the brand lock.
     It is lifted verbatim from the product: app/src/app/globals.css:21 sets
     --success: 30 122 60 (#1E7A3C), and the comparison table tints the cheapest
     cell with it (bg-success/10 text-success). 5a drew that cell in amber, which
     made the hero mock a picture of an app that does not exist. Scope is
     deliberately narrow: cheapest-cell markers inside the mock and its swipe
     deck, nowhere else. Everything QuoteStack says in its own voice stays amber.
     Contrast on paper: 5.0:1, so it clears AA at the mock's small sizes. */
  --color-success:        #1E7A3C;
  --color-success-rgb:     30 122 60;

  --color-focus: var(--color-amber);

  /* ---- Type ----
     Brad's pick, 05-08-2026, from the ?f= comparison built on this page:
     Geist + Inter + Geist Mono, replacing the Space Grotesk / IBM Plex Sans /
     IBM Plex Mono set that v2 brief §2 locked. A deliberate unlock, not drift.
     The old set is still one click away as ?f=c, and Archivo as ?f=a.

     Mono is load-bearing, not decoration: every figure in the hero mock, both
     tables and the drafting labels need tabular numerals, so the set names a
     real mono rather than letting the body face cover it. Geist Mono is wider
     than IBM Plex Mono — visible in the £879.00 column — which is why the
     mock's column widths are worth re-checking after any type change. */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Spacing — 4pt scale, named by role ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.75rem;
  --space-xl:  2.75rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --space-4xl: 10rem;

  /* ---- Type scale — 1.25 (major third) ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.1875rem;
  --text-3xl:  2.75rem;
  --text-display:   clamp(2.5rem, 4.5vw + 1rem, 4.75rem);
  --text-display-s: clamp(2rem, 2.4vw + 1rem, 2.75rem);

  /* ---- Tracking — one rung per type-scale step (apple-design §15).
     Tracking is size-specific: large display text reads too loose as it grows
     and wants negative tracking; small text wants slightly positive for
     legibility. 4a tuned only the two display sizes and body, which left a
     hole in the middle of the scale (xl/2xl sat at 0). These close it. ---- */
  --track-display: -0.032em;
  --track-3xl:     -0.028em;
  --track-2xl:     -0.022em;
  --track-xl:      -0.016em;
  --track-lg:      -0.008em;
  --track-md:      -0.004em;
  --track-base:     0em;
  --track-sm:       0.005em;
  --track-xs:       0.012em;
  /* Mono labels are set in caps at small sizes — they need materially more. */
  --track-mono-sm:  0.06em;
  --track-mono-cap: 0.14em;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:    120ms;
  --dur-short:    220ms;
  --dur-long:     420ms;
  --dur-linedraw: 700ms;

  /* ---- Springs (apple-design §4) — read by JS, never by CSS.
     Apple replaced mass/stiffness/damping with two designer-facing numbers:
       damping  1.0 = critically damped, no overshoot. < 1.0 overshoots.
       response = how fast it reaches target, in SECONDS. Not a duration —
                  a spring has no fixed duration, settle time emerges.
     Values are Apple's own shipped pairs, straight from the skill's table.
     Bounce is reserved for motion the user's own gesture put momentum into;
     overshoot on something that merely appeared reads wrong. ---- */
  --spring-ui-damping:        1.0;   /* menus, reveals, anything non-thrown */
  --spring-ui-response:       0.4;
  --spring-sheet-damping:     0.8;   /* drawer / sheet — Apple's drawer pair */
  --spring-sheet-response:    0.3;
  --spring-momentum-damping:  0.8;   /* after a flick, where bounce is earned */
  --spring-momentum-response: 0.35;
  /* Scroll-deceleration constant for momentum projection (§6). 0.998 is the
     normal scroll feel; 0.99 is snappier. Used by project(), NOT by v²/2a —
     the skill is explicit that the textbook form is not what Apple ships. */
  --decel-rate: 0.998;
  /* Rubber-band resistance past a boundary (§9). Apple's constant. */
  --rubber-constant: 0.55;

  /* ---- Materials (apple-design §12) — translucency as a functional layer.
     Weight encodes hierarchy: chrome is lighter than structure, and bigger
     surfaces read as thicker (stronger blur, deeper shadow). ---- */
  --mat-chrome-blur:  14px;   /* the floating nav pill */
  --mat-chrome-sat:   140%;
  --mat-chrome-bg:    rgb(var(--color-paper-rgb) / 0.82);
  --mat-struct-blur:  26px;   /* the nav sheet — structural, so thicker */
  --mat-struct-sat:   160%;
  --mat-struct-bg:    rgb(var(--color-paper-rgb) / 0.9);
  /* The bright top edge: how a real pane catches light from above. A uniform
     border reads as a drawn rectangle; a lit top edge reads as material. */
  --mat-edge-lit:     rgb(255 255 255 / 0.75);
  --mat-edge-body:    var(--color-rule);
  --mat-scrim:        rgb(var(--color-ink-rgb) / 0.28);

  /* ---- Radius — variant 2's soft scale on containers and controls,
     plus an explicit square rung for data surfaces. ---- */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-sm:   8px;
  --radius-none: 0px;

  /* ---- Rule weight ---- */
  --rule-hair: 1px;
  --rule-heavy: 2px;

  /* ---- Z-scale ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ---- Page ---- */
  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
}