/* ============================================================================
   Portmasters Visual System v2 — Canonical Token File (tokens.css)
   ----------------------------------------------------------------------------
   RULE OF PROVENANCE: every value below appears verbatim in one of the two
   verified extractions. Nothing is invented.
     - "landing"  = approved 2026 landing extraction (forwarder / shipper)
     - "product"  = current live system (apps/website/tailwind.config.ts etc.)
   Where the landings and product agree, landing is treated as canonical v2.
   Where the landings lack something the product ships (error/warning/info
   scales, extended neutral ramp, RTL font, breakpoints, container), the
   product value is adopted and its origin is marked "[from product]".
   Conflicts are catalogued in divergences.json; the brand magenta decision
   (DECIDE-1) is DECIDED 2026-07-03 as #D342F0 (G0-1) — see the DECIDE-1 block below.
   ============================================================================ */

:root {

  /* ==========================================================================
     COLOR — PRIMARY (brand magenta-purple ramp)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     DECIDE-1 — BRAND MAGENTA — DECIDED 2026-07-03: #D342F0 (G0-1)
     --------------------------------------------------------------------------
     The one interactive brand magenta is #D342F0 — the CSS design token that
     drives buttons, rings, selection, nav underline and dots, byte-identical to
     the live product primary-500. The #CE41FF alternative is RETIRED as a token;
     #CE41FF survives only HARD-CODED as a logo petal fill
     in the brandmark SVG artwork (see --logo-petal-bright below), untouched by
     this decision. Decision token: DECIDE-1.
     -------------------------------------------------------------------------- */
  --primary-500: #d342f0;      /* DECIDED 2026-07-03: #D342F0 (G0-1) — brand magenta-purple; =--tw-ring-color; ::selection bg; nav underline; dot. landing forwarder:20 / shipper:19 */

  --primary-050: #fdf4ff;      /* landing forwarder:26 / shipper:20 — eyebrow bg, ghost .ic bg, chip .n bg (product primary-50 #FDF4FF, identical) */
  --primary-100: #f9e8ff;      /* landing forwarder:25 / shipper:20 — icon-bezel gradient, eyebrow border (product primary-100 #F9E8FF, identical) */
  --primary-400: #e26bff;      /* landing forwarder:19 / shipper:19 — lighter magenta (hover gradient top) */
  --primary-600: #bb25d4;      /* landing forwarder:21 / shipper:19 — button gradient bottom (product primary-600 #BB25D4, identical) */
  --primary-700: #9e1bb0;      /* landing forwarder:22 / shipper:19 — eyebrow text, kicker, feat-tag, icon glyphs (product primary-700 #9E1BB0, identical) */
  --primary-800: #6a0085;      /* landing forwarder:23 / shipper:19 — brand-logo wordmark color, stat gradient anchor */
  --primary-900: #47034f;      /* landing forwarder:24 / shipper:19 — used inside shadow rgba(74,3,79) (product primary-950 #47034F, same hex) */

  /* --------------------------------------------------------------------------
     COLOR — PRIMARY extended ramp [from product] — not present in landings,
     adopted from apps/website/tailwind.config.ts to complete the scale for
     product-parity surfaces (dashboards, admin, line-forwarder).
     -------------------------------------------------------------------------- */
  --primary-200: #F3D0FE;      /* [from product] apps/website/tailwind.config.ts:33 */
  --primary-300: #EDAAFD;      /* [from product] apps/website/tailwind.config.ts:34 */
  --primary-950: #47034F;      /* [from product] apps/website/tailwind.config.ts:41 — equals landing --primary-900 */

  /* ==========================================================================
     COLOR — INK / NEUTRAL (text + surface neutrals)
     Landing "ink" ramp is canonical for marketing text; product "neutral"
     ramp fills the ends. Overlapping stops agree exactly (600=#4E5666,
     700=#353C4D) — see divergences.json for the near-miss at 400/500.
     ========================================================================== */
  --ink: #16131c;              /* landing forwarder:27 / shipper:21 — body text, near-black faint purple cast */
  --ink-700: #353c4d;          /* landing forwarder:28 / shipper:21 — chip text, mbhead (product neutral-700 #353C4D, identical) */
  --ink-500: #4e5666;          /* landing forwarder:29 / shipper:21 — lead, body paragraphs (product neutral-600 #4E5666, identical) */
  --ink-400: #737d8d;          /* landing forwarder:30 / shipper:21 — muted meta, sub-labels */

  /* Neutral surface ramp [from product] — extends ink for UI chrome parity */
  --neutral-50: #F4F7F9;       /* [from product] apps/website/tailwind.config.ts:43 */
  --neutral-100: #ECF0F3;      /* [from product] apps/website/tailwind.config.ts:44 */
  --neutral-200: #D9E1E5;      /* [from product] apps/website/tailwind.config.ts:45 */
  --neutral-300: #B4BFC7;      /* [from product] apps/website/tailwind.config.ts:46 */
  --neutral-400: #909CA8;      /* [from product] apps/website/tailwind.config.ts:47 — NB landing --ink-400 #737d8d differs, see divergences.json */
  --neutral-500: #6F7A8A;      /* [from product] apps/website/tailwind.config.ts:48 — NB landing --ink-500 #4e5666 differs, see divergences.json */
  --neutral-600: #4E5666;      /* [from product] apps/website/tailwind.config.ts:49 — equals landing --ink-500 */
  --neutral-700: #353C4D;      /* [from product] apps/website/tailwind.config.ts:50 — equals landing --ink-700 */
  --neutral-800: #2A2F38;      /* [from product] apps/website/tailwind.config.ts:51 */
  --neutral-900: #1E2229;      /* [from product] apps/website/tailwind.config.ts:52 */
  --neutral-950: #14161A;      /* [from product] apps/website/tailwind.config.ts:53 */

  /* ==========================================================================
     COLOR — LINE / PAPER (borders + light backgrounds) — THE FIVE PAINTED PLANES, LIGHT
     --------------------------------------------------------------------------
     THREE RUNGS ADDED 2026-08-02. The dark ladder has had five painted planes
     since the 2026-07-29 Figma mirror (see the DEEP section below); the light
     ladder shipped only TWO (--paper, --paper-2). Two rungs cannot express three
     distinct planes, so page and tray and card were forced to share values — a
     QA gate measured .pm-shell root #faf8fc (Figma's TRAY value) and
     .pm-shell__aside #ffffff (Figma's CARD value) with the card also #ffffff: the
     whole light stack sat one step light AND tray/card were collapsed onto one hex.
     app-shell.css:215-231 diagnosed this correctly and refused to mint raw hex in a
     component, which is why the repair lands here instead.

     THIS IS NOT NEW COLOUR. All three values are already founder-approved and
     already named in docs/m2-foundations/foundation-colour.md §1.3 (the light
     `--paper-*` family), and all three are already in the lint allow-list
     BW-S9 (lint/registry/assertions.json:331,342-345, "ten fill values"). The
     names below are that document's names verbatim — zero renames.

       Figma role       this token      value     Figma ramp stop   provenance
       surface/page     --paper-sunk    #f4f2f6   paper/100         foundation-colour.md:90 (SPEC §2.1 D1)
       surface/tray     --paper         #faf8fc   paper/200         TOK (unchanged)
       surface/plate    --paper-inlay   #efeaf3   paper/plate       foundation-colour.md:88 (V8:114 / VAR-C:104)
       surface/stalled  --paper-press   #f1ecf6   paper/000         foundation-colour.md:89 (V8:122 / VAR-C:118)
       surface/card     --paper-2       #ffffff   paper/300         TOK (unchanged)

     LUMINANCE — computed here from the hexes, and they reproduce
     foundation-colour.md §1.3's published Y column to 5dp:

       plane            hex        Y          L*
       plate  --paper-inlay  #efeaf3  0.83667   93.31   <- worst light fill
       stall  --paper-press  #f1ecf6  0.85345   94.03
       page   --paper-sunk   #f4f2f6  0.89391   95.74
       tray   --paper        #faf8fc  0.94487   97.83
       card   --paper-2      #ffffff  1.00000  100.00

     THE LIGHT STACK IS NOT THE MIRROR OF THE DARK STACK, AND MUST NOT BE
     "CORRECTED" INTO ONE. Dark rises monotonically page < tray < plate < stalled
     < card. Light does not: the plate and the stalled card sit BELOW the page,
     because in light a recess is darker while in dark a recess is lighter. That
     asymmetry is ratified — foundation-colour.md §3.4 ("the mid-tone plate is
     DARKER than its tray") and gate BW-F2 ("the direction relative to the page
     legitimately differs by theme and must not be corrected").

     CONSEQUENCE FOR INK, and it is a real one: the worst light plane is no longer
     white and no longer the page — it is the PLATE #efeaf3 (gate BW-K5,
     lint/registry/assertions.json:454). Every ink role was re-measured against all
     five planes when these rungs landed; the matrix is in tokens-semantic.css
     above the SURFACE ROLES block.

     --paper-press #f1ecf6 is NOT --line-soft #f0ecf6. They differ by one step in R
     (241 vs 240), ΔY 0.00176. One is a fill, one is a hairline, and lint reads them
     as different classes (foundation-colour.md:94). Do not collapse them.
     ========================================================================== */
  --line: #e8e3f0;             /* landing forwarder:31 / shipper:22 — default border */
  --line-soft: #f0ecf6;        /* landing forwarder:32 / shipper:22 — inner-bezel ring, dividers, soft borders */
  --paper-inlay: #efeaf3;      /* NEW 2026-08-02 — surface/plate; plane 1.5, the column nameplate / inlay. Y .83667, the LOWEST light fill, so it is the light contrast floor (BW-K5). foundation-colour.md:88 */
  --paper-press: #f1ecf6;      /* NEW 2026-08-02 — surface/stalled; the debossed / no-activity card. Y .85345. foundation-colour.md:89 */
  --paper-sunk: #f4f2f6;       /* NEW 2026-08-02 — surface/page; plane 0, the page/board well. Y .89391. Derived 0.975 × --paper: 0.975 × (250,248,252) = (243.8,241.8,245.7) → #f4f2f6. foundation-colour.md:90 */
  --paper: #faf8fc;            /* surface/tray. landing forwarder:33 / shipper:22 — WAS the body background; after the 2026-08-02 ramp fill-in the body/page is --paper-sunk and this rung is plane 1 (top nav, sub-bar, sidebar, column body, panel, table header) */
  --paper-2: #ffffff;          /* surface/card. landing forwarder:34 / shipper:22 — pure white surface (product white #ffffff, identical); plane 2 (card, popover, menu, tooltip, dialog, sheet, toast) */

  /* ==========================================================================
     COLOR — GREEN / SUCCESS (live, paid, positive accents)
     Landing green tokens are canonical; product "success" ramp fills the scale.
     500 matches exactly across both (landing --green-bright / product success-500
     = #00C993). --green-bg has a documented per-page drift, see divergences.json.
     ========================================================================== */
  --green: #00936f;            /* landing forwarder:35 / shipper:23 — large-text/fill/icon green (passes 3:1); NOT for small text */
  --green-text: #007a5c;       /* G0-3 approved 2026-07-03, WCAG 5.05:1 on --paper #faf8fc — small green text only (chip labels, captions, ≤18px); #00936f fails 4.5:1 there. FLOOR RESTATED 2026-08-02: 5.05 is the TRAY figure, and the tray is no longer the worst light plane. Against the plate #efeaf3 it measures 4.5028:1 — still AA, by under three thousandths, and it is the tightest passing cell in the light theme. Any future darkening of --paper-inlay fails it. */
  --green-bright: #00c993;     /* landing forwarder:36 / shipper:23 — pulse dots, live accents (product success-500 #00C993, identical) */
  --green-bg: #e7f8f1;         /* landing forwarder:37 — live/paid chip bg (forwarder value chosen as canonical; shipper:23 uses #e6f8f0, see divergences.json) */
  --green-700: #0a7a5d;        /* landing shipper:23 — SHIPPER ONLY: eyebrow text, fee gradient (adopted into shared system) */

  /* Success surface ramp [from product] — extends green for UI parity */
  --success-50: #EAFFF6;       /* [from product] apps/website/tailwind.config.ts:56 */
  --success-100: #CDFEE8;      /* [from product] apps/website/tailwind.config.ts:57 */
  --success-200: #A0FAD7;      /* [from product] apps/website/tailwind.config.ts:58 */
  --success-300: #42F0B6;      /* [from product] apps/website/tailwind.config.ts:59 */
  --success-400: #25E2A9;      /* [from product] apps/website/tailwind.config.ts:60 */
  --success-500: #00C993;      /* [from product] apps/website/tailwind.config.ts:61 — equals landing --green-bright */
  --success-600: #00A478;      /* [from product] apps/website/tailwind.config.ts:62 */
  --success-700: #008364;      /* [from product] apps/website/tailwind.config.ts:63 — NB landing --green-700 #0a7a5d differs, see divergences.json */
  --success-800: #006851;      /* [from product] apps/website/tailwind.config.ts:64 */
  --success-900: #005543;      /* [from product] apps/website/tailwind.config.ts:65 */
  --success-950: #003027;      /* [from product] apps/website/tailwind.config.ts:66 */

  /* ==========================================================================
     COLOR — DEEP (dark-section base family) — THE FIVE PAINTED PLANES
     --------------------------------------------------------------------------
     MIRRORED FROM FIGMA 2026-07-29 (founder-approved, measured live in the file,
     not derived here). The whole dark ladder moved PURPLER and one step lighter
     at every rung. It stays strictly monotonic by luminance — the property the
     plane law (foundation-colour.md §2.1) depends on to read as a stack.

       Figma role       this token   new value   was        Figma ramp stop
       surface/page     --deep       #0f0715     #0b0410    ramp/deep/500
       surface/tray     --deep-2     #1e1029     #150a1d    ramp/deep/200
       surface/plate    --deep-4     #241830     #20142a    ramp/deep/100
       surface/stalled  --deep-5     #2b1d36     #251c2e    ramp/deep/50
       surface/card     --deep-6     #322639     (unchanged)

     The ordinal names -4/-5/-6 are the ones foundation-colour.md:74-79 already
     minted for the plate / stalled / card planes ("Zero renames"). Only their
     VALUES move here; -6 lands at its documented value untouched.

     WHY THIS LADDER IS SAFE — MEASURED, not asserted. All three dark ink roles
     against all five planes, WCAG 2.x, computed 2026-07-29 from the hexes below:

       plane            Y         L*     #ffffff  #B4BFC7  #909CA8
       page  --deep    0.00308    2.78    19.78    10.57     7.07
       tray  --deep-2  0.00807    7.29    18.08     9.66     6.46
       plate --deep-4  0.01242   10.86    16.82     8.99     6.01
       stall --deep-5  0.01659   13.58    15.77     8.42     5.64
       card  --deep-6  0.02360   17.27    14.27     7.62     5.10  <- worst case

     Worst case 5.10:1 (muted on card). ZERO of the 15 pairs falls below AA 4.5.
     Y rises at every rung (.00308 < .00807 < .01242 < .01659 < .02360), so the
     five planes remain distinguishable in luminance order.
     ========================================================================== */
  --deep: #0f0715;             /* surface/page. WAS #0b0410 (landing forwarder:38 / shipper:24) — moved purpler 2026-07-29 to Figma ramp/deep/500; plane 0, the page/board well */
  --deep-2: #1e1029;           /* surface/tray. WAS #150a1d (landing forwarder:39) — moved to Figma ramp/deep/200; plane 1, top nav / sub-bar / sidebar / column body */
  --deep-3: var(--deep-2);     /* DEPRECATED alias for --deep-2. Its old literal #1e1029 IS the new tray value, so the name is now a duplicate rung. Kept (not deleted) because 5 files still read it — list.css:121, auth-brand-panel.css:30, auth-split-layout.css:446, promo-banner.css:190,214. foundation-colour.md:76 already retired --deep-3 as a surface. Do not use in new code. */
  --deep-4: #241830;           /* surface/plate. WAS #20142a (foundation-colour.md:77 / V8:70) — moved to Figma ramp/deep/100; plane 1.5, the column nameplate. No CSS role consumes it yet — see tokens-semantic.css */
  --deep-5: #2b1d36;           /* surface/stalled. WAS #251c2e (foundation-colour.md:78 / V8:78) — moved to Figma ramp/deep/50; the debossed / stalled card. No CSS role consumes it yet */
  --deep-6: #322639;           /* surface/card — UNCHANGED by the 2026-07-29 move; the one rung that did not shift. foundation-colour.md:79 / V8:74. Now backs --surface-2 in dark (was --deep-3, which after this move collides with --deep-2) */

  /* ==========================================================================
     COLOR — STATUS SCALES [from product] — error / warning / info
     Absent from landings entirely; adopted wholesale from product so v2 can
     express validation/alert states. Origin marked on every stop.
     Note: landing hardcodes error-500 (#f2407b, mbhead accent) and warning-ish
     amber pills (#9a5b00 / #9a6a00 on #fdf2dd / #fdf2d8) — see below + tokens.json.
     ========================================================================== */
  --error-50: #FDF2F6;         /* [from product] apps/website/tailwind.config.ts:69 */
  --error-100: #FDE6EF;        /* [from product] apps/website/tailwind.config.ts:70 */
  --error-200: #FDCDE0;        /* [from product] apps/website/tailwind.config.ts:71 */
  --error-300: #FCA5C6;        /* [from product] apps/website/tailwind.config.ts:72 */
  --error-400: #F96D9F;        /* [from product] apps/website/tailwind.config.ts:73 */
  --error-500: #F2407B;        /* [from product] apps/website/tailwind.config.ts:74 — equals landing mbhead-accent-pink #f2407b (forwarder:287) */
  --error-600: #E22056;        /* [from product] apps/website/tailwind.config.ts:75 */
  --error-700: #C4123F;        /* [from product] apps/website/tailwind.config.ts:76 */
  --error-800: #A21235;        /* [from product] apps/website/tailwind.config.ts:77 */
  --error-900: #87142F;        /* [from product] apps/website/tailwind.config.ts:78 */
  --error-950: #530416;        /* [from product] apps/website/tailwind.config.ts:79 */

  --warning-50: #FEFAEC;       /* [from product] apps/website/tailwind.config.ts:82 */
  --warning-100: #FBF2CA;      /* [from product] apps/website/tailwind.config.ts:83 */
  --warning-200: #F6E591;      /* [from product] apps/website/tailwind.config.ts:84 */
  --warning-300: #F2D257;      /* [from product] apps/website/tailwind.config.ts:85 */
  --warning-400: #F0C442;      /* [from product] apps/website/tailwind.config.ts:86 */
  --warning-500: #E8A018;      /* [from product] apps/website/tailwind.config.ts:87 */
  --warning-600: #CD7B12;      /* [from product] apps/website/tailwind.config.ts:88 */
  --warning-700: #AA5813;      /* [from product] apps/website/tailwind.config.ts:89 */
  --warning-800: #8A4516;      /* [from product] apps/website/tailwind.config.ts:90 */
  --warning-900: #723915;      /* [from product] apps/website/tailwind.config.ts:91 */
  --warning-950: #411D07;      /* [from product] apps/website/tailwind.config.ts:92 */
  --warning-text: #9d5011;     /* PAPER-TUNED AMBER TEXT STOP, minted 2026-08-02 (AA regression lane). Same shape and same reason as --green-text above: the product ramp has no amber stop that clears AA 4.5 as small text on the LIGHT PLATE #efeaf3. Measured: warning-700 #AA5813 = 4.3100 plate / 4.3916 stalled — under the bar on two of the five light planes; warning-600 #CD7B12 = 2.7546, far under; warning-800 #8A4516 = 6.0246 but is two stops down and reads brown, not amber. #9d5011 measures 4.9408 plate · 5.0343 stalled · 5.2598 page · 5.5437 tray · 5.8509 card — AA on all five. NOT INVENTED HERE: it is the ratified status-palette v2 value for Waiting, sourced there as the Figma variable `status/warning-text` VariableID:209:2280, and its published figures (5.26 page / 4.94 plate, docs/2026-08-01-status-palette-proposal-v2.md §3 + §5a) reproduce exactly against these five planes. Consumed by --text-warning (tokens-semantic.css). The 11-stop --warning-* ramp is untouched — this is a sibling text stop, not a ramp edit. */

  --info-50: #F0F3FE;          /* [from product] apps/website/tailwind.config.ts:95 */
  --info-100: #DCE3FD;         /* [from product] apps/website/tailwind.config.ts:96 */
  --info-200: #C1CEFC;         /* [from product] apps/website/tailwind.config.ts:97 */
  --info-300: #96B0FA;         /* [from product] apps/website/tailwind.config.ts:98 */
  --info-400: #6587F5;         /* [from product] apps/website/tailwind.config.ts:99 */
  --info-500: #425FF0;         /* [from product] apps/website/tailwind.config.ts:100 */
  --info-600: #2B3DE5;         /* [from product] apps/website/tailwind.config.ts:101 */
  --info-700: #232CD2;         /* [from product] apps/website/tailwind.config.ts:102 */
  --info-800: #2326AA;         /* [from product] apps/website/tailwind.config.ts:103 */
  --info-900: #222786;         /* [from product] apps/website/tailwind.config.ts:104 */
  --info-950: #191A52;         /* [from product] apps/website/tailwind.config.ts:105 */

  /* ==========================================================================
     COLOR — BASE keywords [from product]
     ========================================================================== */
  --white: #ffffff;            /* [from product] apps/website/tailwind.config.ts:27 */
  --black: #000000;            /* [from product] apps/website/tailwind.config.ts:28 */

  /* ==========================================================================
     COLOR — LOGO PETALS (hardcoded, locked to brandmark SVG — NOT themeable)
     Both landings hardcode these identical hexes in the inline pm-logo symbol.
     ========================================================================== */
  --logo-petal-magenta: #B500F4;  /* landing forwarder:681 / shipper:519 — pm-logo path fill */
  --logo-petal-bright: #CE41FF;   /* landing forwarder:681 / shipper:519 — pm-logo path fill; HARDCODED in artwork only — the retired DECIDE-1 alt magenta lives on solely here (G0-1) */
  --logo-petal-deep: #9501C8;     /* landing forwarder:681 / shipper:519 — pm-logo path fill */

  /* ==========================================================================
     COLOR — TRAFFIC-LIGHT WINDOW DOTS (device chrome)
     Forwarder uses real macOS dots; shipper uses pastel variants.
     ========================================================================== */
  --traffic-dot-red: #ff5f57;     /* landing forwarder:229,267 — mac window dot d1 */
  --traffic-dot-amber: #febc2e;   /* landing forwarder:229,267 — mac window dot d2 */
  --traffic-dot-green: #28c840;   /* landing forwarder:229,267 — mac window dot d3 */
  --scrn-dot-pastel-red: #ffd0e4;    /* landing shipper:371 — shipper soft window dot */
  --scrn-dot-pastel-amber: #ffe7c2;  /* landing shipper:371 — shipper soft window dot */
  --scrn-dot-pastel-green: #cdeedd;  /* landing shipper:371 — shipper soft window dot */

  /* ==========================================================================
     COLOR — MISC HARDCODED ACCENTS (from landing recipes)
     ========================================================================== */
  --ghost-hover-border: #e9c6f3;      /* landing forwarder:103 / shipper:68 — btn-ghost:hover border-color */
  --eyebrow-green-border: #c7eedd;    /* landing shipper:45,426 — green eyebrow border (SHP) */
  --fee-free-border: #bfe9d7;         /* landing shipper:330 — fee-free chip border (SHP) */
  --mbhead-accent-pink: #f2407b;      /* landing forwarder:287 — mbhead.r bar (= --error-500) */
  --mbhead-accent-neutral: #8b94a6;   /* landing forwarder:288 — mbhead.n bar */
  --badge-unpaid-text: #9a5b00;       /* landing forwarder:450 — fin-badge.unpaid text (on #fdf2dd) */
  --badge-unpaid-bg: #fdf2dd;         /* landing forwarder:450 — fin-badge.unpaid bg */
  --tag-illustrative-text: #9a6a00;   /* landing shipper:159-160,324 — amber illustrative pill text */
  --tag-illustrative-bg: #fdf2d8;     /* landing shipper:159-160,324 — amber illustrative pill bg */
  --tag-illustrative-border: #f3dca0; /* landing shipper:159-160,324 — amber illustrative pill border */

  /* ==========================================================================
     COLOR — ORB GLOWS (dark-section radial pseudo-elements)
     Stored as ready-to-use rgba so gradients read straight from the token.
     ========================================================================== */
  --orb-magenta: rgba(211,66,240,.4);   /* landing forwarder:172,473,540 / shipper:120,307 — hero/dark magenta orb (.4–.55 range; .4 canonical) */
  --orb-green: rgba(0,201,147,.18);     /* landing forwarder:174,475,542 / shipper:118,306 — secondary green orb (.12–.3 range; .18 canonical) */
  --orb-deep-purple: rgba(106,0,133,.5);/* landing forwarder:176 — hero orb-c (fwd) */

  /* ==========================================================================
     COLOR — ::selection
     ========================================================================== */
  --selection-bg: #d342f0;     /* landing forwarder:67 / shipper:38 — ::selection background = --primary-500 */
  --selection-fg: #ffffff;     /* landing forwarder:67 / shipper:38 — ::selection color */


  /* ==========================================================================
     TYPOGRAPHY — TWO VOICES, ONE RULE (added 2026-08-01)
     ----------------------------------------------------------------------
     EVERY type SIZE / WEIGHT / TRACKING / LEADING token in this file is the
     MARKETING (landing) voice: --body-font-size 17px, --h1-size, --lead-size,
     --eyebrow-size, --btn-size 15.5px, --nav-link-size 14.5px,
     --nav-brand-size 17.5px …  Their provenance is a landing page
     ("landing forwarder:NN / shipper:NN"), not the product frame.

     The PRODUCT voice lives in a separate file — tokens/tokens-type.css — and
     carries the 14 named Figma text styles as --type-<style>-{size,weight,
     tracking,leading}. Product components (components/**) read ONLY --type-*.

     A product component that reads a token from THIS file's type sections is a
     LEAK, not a choice. That is not theoretical: the 2026-08-01 audit measured
     the AppShell wordmark rendering at 17.5px because it consumed
     --nav-brand-size, and the app-top-nav row at 14.5px from --nav-link-size.
     Both are fixed; the rule is here so the next author does not repeat it.
     (FAMILY tokens below — --font-body / --font-arabic / --font-feature-* —
     are shared by BOTH voices and are not part of either ramp.)
     ========================================================================== */

  /* ==========================================================================
     TYPOGRAPHY — FONT FAMILIES  (shared by both voices)
     ========================================================================== */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  /* landing forwarder:12-15 / shipper:12-15 — Inter woff2 400/500/600/700, font-display:swap (product font-inter, apps/website/tailwind.config.ts:120-122) */
  --font-arabic: var(--font-ibm-plex-sans-arabic);  /* [from product] apps/website/tailwind.config.ts:122 — IBM Plex Sans Arabic, RTL/ar only */
  /* MONOSPACE IS INTENTIONAL, AND NOW IT HAS A TOKEN (2026-08-01, wave 2).
     The type audit flagged `ui-monospace @ 13px` on .pm-detail-list__value--mono
     (detail-list, page-header, master-detail-layout) under T7-FONT alongside the
     date-picker's Arial. The two are NOT the same defect: date-picker had declared
     NO font and was falling through to Chrome's UA stack (a bug, fixed); the mono
     value is a DELIBERATE choice on ONE value shape — machine identifiers the user
     reads back character by character and types into another system (container
     numbers MSKU-4471, B/L numbers, booking refs, IMO/MMSI).
     Two properties make it load-bearing, and neither is decorative:
       · unambiguous glyphs — 0 vs O and 1 vs l are distinct in a mono face and are
         NOT reliably distinct in Inter at 13.5px, and a mis-read container number
         is a mis-routed container;
       · fixed advance width — identifiers line up column-wise in a detail list, so
         a wrong digit is visible as a ragged column.
     What WAS wrong is that it had no token behind it: three component files carried
     the same literal stack copied from the matrix spec sheets, so there was nothing
     to change centrally and nothing to audit against. This token is that anchor.
     It is a FAMILY only — the mono value still reads its size/weight/leading/tracking
     from the product ramp (body/default), so it stays on the type system. */
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;  /* machine identifiers only (container / B-L / booking refs). NOT a general voice — see the note above before adding a consumer. */
  --font-feature-settings-body: "cv02","cv03","cv04","cv11";  /* landing forwarder:62 / shipper:35 — Inter char variants */
  --font-feature-settings-numeric: "tnum";  /* landing forwarder:268,294,401 / shipper:167 — prices, ids, urls */

  /* ==========================================================================
     TYPOGRAPHY — BODY BASE
     ========================================================================== */
  --body-font-size: 17px;          /* landing forwarder:53-64 / shipper:33-35 */
  --body-line-height: 1.62;        /* landing forwarder:53-64 / shipper:33-35 */
  --body-letter-spacing: -0.012em; /* landing forwarder:53-64 / shipper:33-35 */

  /* ==========================================================================
     TYPOGRAPHY — HEADING BASE (h1/h2/h3 shared)
     ========================================================================== */
  --heading-letter-spacing: -0.035em; /* landing forwarder:81 / shipper:49 */
  --heading-line-height: 1.03;        /* landing forwarder:81 / shipper:49 */
  --heading-font-weight: 600;         /* landing forwarder:81 / shipper:49 */

  /* h1 hero — clamp differs fwd/shp; forwarder (wider dark hero) taken canonical */
  --h1-size: clamp(2.55rem, 6.4vw, 4.85rem); /* landing forwarder:192 (shipper:128 = clamp(2.5rem,5.6vw,4.25rem), see divergences.json) */
  --h1-letter-spacing: -0.048em;             /* landing forwarder:192 (shipper:128 = -0.046em) */
  --h1-size-mobile: 2.1rem;                  /* landing forwarder:192 (shipper mobile 2.05rem) */

  /* h2 section — clamp differs fwd/shp; forwarder taken canonical */
  --h2-size: clamp(2.1rem, 4.6vw, 3.35rem);  /* landing forwarder:82 (shipper:50 = clamp(2.1rem,4.6vw,3.25rem)) */
  --h2-letter-spacing: -0.04em;              /* landing forwarder:82 / shipper:50 */
  --h2-font-weight: 600;                     /* landing forwarder:82 / shipper:50 */

  /* h3 core/card */
  --h3-core-size: 1.5rem;              /* landing forwarder:418 (shipper:242 core h3 = 1.34rem) */
  --h3-core-letter-spacing: -0.035em;  /* landing forwarder:418 (shipper:242 = -0.032em) */
  --h3-paincard-size: 1.24rem;         /* landing forwarder:378 — pain-card h3 */
  --h4-item-size: 1.06rem;             /* landing forwarder:493,529 / shipper:259 — rm-item/diff h4 (1.04–1.06rem) */

  /* .lead paragraph */
  --lead-size: clamp(1.06rem, 1.7vw, 1.3rem); /* landing forwarder:83 / shipper:51 */
  --lead-color: var(--ink-500);               /* landing forwarder:83 / shipper:51 */
  --lead-font-weight: 400;                    /* landing forwarder:83 / shipper:51 */
  --lead-letter-spacing: -0.013em;            /* landing forwarder:83 / shipper:51 */
  --lead-line-height: 1.58;                   /* landing forwarder:83 / shipper:51 */

  /* ==========================================================================
     TYPOGRAPHY — EYEBROW / KICKER / FEAT-TAG (small uppercase labels)
     ========================================================================== */
  --eyebrow-size: 11.5px;              /* landing forwarder:76 / shipper:44 */
  --eyebrow-font-weight: 600;          /* landing forwarder:76 / shipper:44 */
  --eyebrow-letter-spacing: .16em;     /* landing forwarder:76 / shipper:44 */
  --kicker-size: 13px;                 /* landing forwarder:84 — kicker */
  --kicker-letter-spacing: .1em;       /* landing forwarder:84 — kicker */
  --feat-tag-size: 11px;               /* landing forwarder:415-416 — feat-tag */
  --feat-tag-letter-spacing: .13em;    /* landing forwarder:415-416 — feat-tag */

  /* ==========================================================================
     TYPOGRAPHY — BUTTON / NAV / STAT / META type sizes
     ========================================================================== */
  --btn-size: 15.5px;              /* landing forwarder:87 / shipper:54 — base button */
  --btn-lg-size: 16.5px;           /* landing forwarder:108 / shipper:72 — btn-lg */
  --btn-hero-size: 17px;           /* landing forwarder:134 / shipper:82 — btn-hero */
  --btn-font-weight: 600;          /* landing forwarder:87 / shipper:54 */
  --btn-letter-spacing: -0.011em;  /* landing forwarder:87 / shipper:54 */
  --btn-font-weight-demoted: 500;  /* landing forwarder:124 / shipper:89 — quiet/ghost-secondary */

  --nav-link-size: 14.5px;         /* landing forwarder:149 / shipper:98 */
  --nav-link-font-weight: 500;     /* landing forwarder:149 / shipper:98 */
  --nav-brand-size: 17.5px;        /* landing forwarder:156 / shipper:105 */
  --nav-brand-font-weight: 600;    /* landing forwarder:156 / shipper:105 */
  --nav-brand-letter-spacing: -0.025em; /* landing forwarder:156 / shipper:105 */

  --stat-letter-spacing: -0.045em; /* landing forwarder:399,499,567 / shipper:216,322 — big-number stat (-0.038em to -0.045em) */
  --meta-font-weight-light: 450;   /* landing forwarder:294,447-448 / shipper:165,282 — light meta (mbcard sub, offer-pt) */


  /* ==========================================================================
     SPACING — LAYOUT
     ========================================================================== */
  --maxw: 1200px;                  /* landing forwarder:47 — primary content width (shipper:29 = 1140px, see divergences.json) */
  --maxw-narrow: 1140px;           /* landing shipper:29 — narrow two-col variant, G0-5 decided 2026-07-03 */
  --wrap-gutter: 30px;             /* landing forwarder:74 / shipper:42 — desktop .wrap padding */
  --wrap-gutter-mobile: 20px;      /* landing forwarder:617 / shipper:463 — <760px .wrap padding */

  /* container [from product] — Tailwind container plugin, identical across 3 apps */
  --container-padding: 1rem;       /* [from product] apps/website/tailwind.config.ts:17-22 — DEFAULT & sm */
  --container-padding-md: 1.5rem;  /* [from product] apps/website/tailwind.config.ts:17-22 — md & lg */

  /* ==========================================================================
     SPACING — SECTION / GRID / CARD
     ========================================================================== */
  --section-py: 112px;             /* landing forwarder:382,510 / shipper:223,248 — standard section vertical padding */
  --section-py-pain: 118px;        /* landing forwarder:316 — s-pain / s-steps top */
  --section-py-mobile: 74px;       /* landing forwarder / shipper — mobile section collapse */

  --gap-bento: 20px;               /* landing forwarder:361 — bento / pain-grid */
  --gap-steps: 22px;               /* landing shipper:227 — steps-grid */
  --gap-rm: 24px;                  /* landing forwarder:486 — rm-grid */
  --gap-diff: 32px;                /* landing forwarder:513 / shipper:249 — diff/value-grid (32–54px) */
  --gap-feat: 9px;                 /* landing forwarder — feat-rows */
  --gap-hero-cta: 14px;            /* landing shipper:133 — hero-cta */

  --pad-core: 32px;                /* landing forwarder:414 — core-pad (shipper:228 = 34px, see divergences.json) */
  --pad-core-mobile: 26px;         /* landing forwarder — mobile core-pad */
  --pad-paincard: 32px;            /* landing forwarder:362 — pain-card */
  --pad-offer-shell-y: 66px;       /* landing forwarder:537 — offer-shell vertical */
  --pad-offer-shell-x: 58px;       /* landing forwarder:537 — offer-shell horizontal */
  --pad-rm-col: 36px;              /* landing forwarder — rm-col */

  --hero-pt: 188px;                /* landing forwarder:167 — hero top padding (dark, bleeds into mock; shipper:115 = 176px) */
  --hero-pt-mobile: 140px;         /* landing forwarder:631 — mobile hero top (shipper:479 = 132px) */

  --eyebrow-py: 7px;               /* landing forwarder:77 / shipper:45 — eyebrow padding block */
  --eyebrow-px: 15px;              /* landing forwarder:77 / shipper:45 — eyebrow padding inline */


  /* ==========================================================================
     SPACING — SCALE (4px base). NEW in M1 (§3a). Primitive names; adopt
     incrementally. Matches the observed px histogram (8×21, 12×14, 4×13,
     6×6, 24×5, 16×3, 32×1). M1 is token-ADD only — components keep literal px
     this milestone; migration is a separate card so it can't regress layouts.

     DEFERRAL CLOSED 2026-08-01 — the note below used to read "Off-grid 6px
     (switch/text-field gap) and 28px (checkbox ms-7) are NOT migrated in M1
     (scope-safe); decision deferred". This IS the separate migration card the
     note pointed at, so the deferral is spent rather than renewed. Both values
     were resolved, and they resolved DIFFERENTLY — which is why one blanket
     deferral was never going to work:

       6px  is a genuine off-scale STEP (1.5x the base) with no Figma variable
            behind it. Snapped, per case: label-above-control stacks and menu
            rows went UP to --space-2 8px (up-rounding never crowds text and it
            grows the menu row's hit target); compact inline icon-to-label gaps
            went DOWN to --space-1 4px, following the precedent data-table.css
            already set ("gap-1.5 ~= 6px -> 4px ramp"). 15 declarations, 10 files.

       28px is NOT an off-scale step at all — it is an alignment offset that has
            to equal the width of the thing it clears: the 16px checkbox box plus
            its 12px gap. It is now written as that sum, calc(--space-4 +
            --space-3), pixel-identical and self-maintaining. Its sibling
            switch ms-14 56px is the same shape and became
            calc(--control-h + --space-3) = 44 + 12.
            CORRECTED 2026-08-04 (control-height reversal): that switch line was
            the RIGHT shape reading the WRONG term. The 44 it clears is the
            switch TRACK'S WIDTH (switch.css:74, w-11), not a control height —
            the track is only 24px tall. When --control-h went 44 -> 36 the
            calc would have silently shrunk the indent to 48px and pushed the
            description under its own track, so switch.css:207 now reads
            calc(44px + --space-3), still 56px. The checkbox line above is
            untouched and still correct: it composes 16 + 12 = 28.

     THE RULE THAT FELL OUT OF IT, for whoever hits this next: a DERIVED measure
     (an indent that must clear a control, a compensation for a border) is not
     required to be a scale step — it is required to be composed of them.
     ========================================================================== */
  --space-1: 4px;   /* hairline gaps, icon nudge (13 current uses) */
  --space-2: 8px;   /* control gap / px-2 (21 current uses — most common) */
  --space-3: 12px;  /* label gap, md button px (14 uses) */
  --space-4: 16px;  /* lg button px, frame inset (3 uses) */
  --space-5: 24px;  /* card padding p-6 (5 uses) */
  --space-6: 32px;  /* core-pad (1 use) */
  --space-7: 48px;  /* section sub-block (reserved) */
  --space-8: 64px;  /* section rhythm (reserved) — THE TOP OF THE RAMP. There is no --space-9; see below. */

  /* --space-9 — ASKED FOR, AND REFUSED, 2026-08-02. THE RAMP STOPS AT 64px.
     ***APPLIED 2026-08-02 — SETTLED, DO NOT RE-LITIGATE.*** The refusal held and the
     component was fixed instead: auth-brand-panel.css:143 now reads
     `padding-inline: clamp(var(--space-6), 6vw, var(--space-8));` = 32px → 64px
     — read back and confirmed in that file on 2026-08-02. There is no --space-9 in
     the library and none is needed. The argument below is kept because this question
     has come back once already; it is history, not an open item.

     WHAT WAS ASKED, AND WHY IT WAS REFUSED
     One line in the library referenced a stop that has never existed:
     components/auth-brand-panel/auth-brand-panel.css (then :131)
         padding-inline: clamp(var(--space-6), 6vw, var(--space-9));
     An unresolvable var() with no fallback makes the whole declaration invalid at
     computed-value time, so padding-inline fell back to its initial 0 and the panel
     copy ran flush to the edge — a real defect at the time, documented honestly at
     auth-brand-panel/matrix.html:127-133.

     THE SCALE DOES NOT NEED A NINTH STOP, so minting one to satisfy one clamp
     ceiling would be scale inflation:
       · docs/m2-foundations/foundation-space.md §1.3 fixes the layout tier at eight
         steps, 4 × {1,2,3,4,6,8,12,16}, and §1.2 rules "the layout ramp is the
         shipped 4px ramp, unchanged".
       · There is no 96px anywhere: not in the 335-use component census (--space-7
         ×3 and --space-8 ×5 are already the thinnest-used stops), not in PROD, and
         not behind a Figma space variable. It would be the only stop in the ramp
         with zero provenance.
       · This file already settled the identical question against itself: 6px was
         refused as a step because it is "a genuine off-scale STEP with no Figma
         variable behind it", and the rule that fell out of it — a DERIVED measure
         "is not required to be a scale step, it is required to be composed of them"
         — applies exactly to a clamp ceiling for a marketing panel gutter.
     The fix therefore belonged in the component, not here. It was one word:
     --space-9 → --space-8, giving clamp(32px, 6vw, 64px) — valid, on-ramp, and the
     widest gutter the ramp offers. APPLIED 2026-08-02 in auth-brand-panel.css:143
     (verified by reading that line after the change). Ninth stop: still refused. */

  /* ==========================================================================
     SIZE — CONTROL HEIGHT
     --------------------------------------------------------------------------
     36px. FOUNDER RULING, AMIR, 2026-08-04, GIVEN TWICE — SETTLED, DO NOT
     RE-LITIGATE. "EVERY SINGLE-ROW CONTROL IS EXACTLY 36px. One height,
     everywhere, NO EXCEPTIONS." A control standing at 44 is now the defect.

     THIS REVERSES the 2026-07-29 Figma mirror recorded below, which had moved
     size/control-h 36 -> 44. The reversal was made in Figma FIRST — 2,328
     controls converted and gated there — and this token is the code side of
     that same ruling, so design and code agree at 36.

     ACCESSIBILITY IS SETTLED AND IS NOT A REASON TO REOPEN THIS. 36px is below
     the WCAG 2.5.5 / size/hit-min 44px target. The founder was told that in
     those words and chose 36 anyway. No gate may fail work for it. The
     BW-R3 measurement "14 of 25 interactive elements under 44px"
     (figma-variable-manifest.md:441) is history, not a live defect.

     WHAT THE SUPERSEDED 2026-07-29 ENTRY SAID, kept as history so nobody
     re-derives it: Figma `PM Space` size/control-h moved 36 -> 44 and every
     single-row control sat at 44 — button, text-field-control, select,
     location-search, quantity-stepper, segmented. Before that move only the
     field family was 44 and button was 36, so a button and the field beside it
     did not line up. Alignment is still the point; the number is now 36.

     SCOPE OF THIS TOKEN: it is the value, and as of 2026-08-04 it is also very
     nearly the migration — 62 declarations across components/ read
     var(--control-h) and follow this line. The few remaining literals were
     converted with it (date-picker, location-search, option-toggle-group,
     app-top-nav, tab). Anything still writing a raw 44 as a control height is
     a bug against this ruling.
     ========================================================================== */
  --control-h: 36px;  /* single-row control height — one number, no exceptions (founder ruling, Amir, 2026-08-04). WAS 44px between 2026-07-29 and 2026-08-04; before that it was 36 for button while the field family sat at 44. */

  /* ==========================================================================
     RADIUS
     --------------------------------------------------------------------------
     SANCTIONED RADII: components consume ONLY --radius-hero/-card/-control/-pill
     (tokens-semantic.css), plus --radius-tray/-tab as of 2026-07-29. The raw
     --r-* below are INTERNAL primitives that back those roles or remain for
     landing-page recipes; do NOT reference them from component CSS.
     alias-never-rename: every NAME below is unchanged. VALUES are not — the
     2026-07-29 Figma mirror repointed --r-md and --r-sm (see THE LADDER block
     after the primitives). Renaming is what breaks consumers; repointing a tier
     is the whole point of a tier.
     ========================================================================== */
  --r-lg: 26px;                    /* backs --radius-hero. landing forwarder:46 / shipper:29 — pain-card, rm-col */
  --r-shell: 30px;                 /* INTERNAL — consume via semantic role, not directly. landing forwarder:408 / shipper:142 — double-bezel shell */
  --r-core: 22px;                  /* INTERNAL — consume via semantic role, not directly. landing forwarder:411 / shipper:145 — bezel core, hero-mock (top-only) */
  --r-darkband: 36px;              /* INTERNAL — consume via semantic role, not directly. landing forwarder:471,537 / shipper:305 — offer/fee-shell */
  --r-film-shell: 32px;            /* INTERNAL — consume via semantic role, not directly. landing forwarder:537 — film-shell */
  --r-hero-bottom: 40px;           /* INTERNAL — consume via semantic role, not directly. landing forwarder:168 — hero bottom corners (28px mobile) */
  --r-hero-bottom-mobile: 28px;    /* INTERNAL — consume via semantic role, not directly. landing forwarder:168 — hero bottom corners mobile */
  --r-pill: 100px;                 /* backs --radius-pill. landing forwarder:87,77,146 / shipper:55,45,95 — all buttons, eyebrows, chips, badges, tags, nav */
  --r-icon: 15px;                  /* INTERNAL — consume via semantic role, not directly. landing forwarder:362,372 / shipper:230 — machined icon (14–15px) */
  --r-frame: 16px;                 /* INTERNAL — consume via semantic role, not directly. landing forwarder:240 / shipper:366 — screenshot frame / card-in */
  --r-featrow: 10px;               /* INTERNAL — consume via semantic role, not directly. landing forwarder:455 / shipper:234 — feat-row/mbcard/step-num */
  --r-mbhead: 8px;                 /* INTERNAL — consume via semantic role, not directly. landing forwarder — mbhead */
  --r-chip: 14px;                  /* INTERNAL — landing-recipe value ONLY as of 2026-07-29; it no longer backs --r-md → --radius-card (that tier moved to 12px). Value unchanged. landing forwarder:524 — chip (13–14px) */
  --r-ck: 8px;                     /* INTERNAL — landing-recipe value ONLY as of 2026-07-29; it no longer backs --r-sm → --radius-control (that tier moved to 12px). Value unchanged; tab-button's 8px now comes from --r-tab-top. landing forwarder / shipper — ck square (7–9px) */

  /* --------------------------------------------------------------------------
     THE 2026-07-29 LADDER (mirrored from Figma, founder-approved) — the G0-2
     8px/14px split is GONE. Figma `PM Space` moved three radius variables and
     left the marks alone (figma-variable-manifest.md:444-451 is the pre-move
     table; these are the post-move values, measured live in the file):

       radius/control   8 -> 12   button · text-field · select · segmented ·
                                  location-search · date-picker ·
                                  quantity-stepper · option-toggle-group ·
                                  dropdown · rich-text-editor ·
                                  message-composer-bar · user-dropdown
       radius/card     10 -> 12   cards · panels · lists · tables · popovers · toasts
       radius/tray     14 -> 18   trays · modals · sheets · carousels
       radius/rail  1 · radius/rule 2 · radius/focus 3  — UNCHANGED. These are
                                  the MARKS (progress tracks, rails, ticks);
                                  they were never on the product ladder.
       radius/none  0 · radius/circle 50%               — UNCHANGED.

     tab-button is the one two-value corner: 8px top, 0 bottom (--r-tab-top).
     It did NOT follow controls to 12 — a tab that meets the panel edge keeps
     the tighter shoulder.

     HARD RULE, docs/2026-07-26-bridge-watch-direction-spec.html:620 —
     "Any product element whose radius reaches half its height is a lint failure."
     So 12px is a CEILING, not a floor: it is only legal on an element taller
     than 24px, and 18px only above 36px. Figma capped short controls below 12
     for exactly this reason. CSS cannot self-cap (a var does not know the box
     it lands in) — enforcement is a lint assertion over measured heights, not
     a token value, so nothing below is "capped" defensively.
     -------------------------------------------------------------------------- */
  --r-12: 12px;                    /* NEW 2026-07-29 — the merged control+card tier (Figma radius/control = radius/card = 12). Replaces the 8/14 pair; both tiers now land here */
  --r-18: 18px;                    /* NEW 2026-07-29 — the tray tier (Figma radius/tray 14 -> 18): trays, modals, sheets, carousels */
  --r-tab-top: 8px;                /* NEW 2026-07-29 — tab-button TOP corners only; bottom stays 0. Measured 8px in Figma. Same number as --r-ck but its OWN name, because tab-button can no longer ride --radius-control: that role left 8px for 12px and tab-button did not follow */

  /* THE MARKS — NAMED 2026-08-01. These three VALUES are not new: the ladder
     block above has listed them since the 2026-07-29 Figma mirror ("radius/rail 1
     · radius/rule 2 · radius/focus 3 — UNCHANGED. These are the MARKS (progress
     tracks, rails, ticks); they were never on the product ladder"). What was
     missing is that they had no primitive and no role, so nothing could CONSUME
     them — and that is exactly why 18 short boxes ended up on the 12px control
     tier and failed the half-height rule directly above. A focus ring drawn round
     inline text, a 16px checkbox tick and a 2px skeleton bar are all marks; with
     no mark token in the file the only reachable value was 12px.
     skeleton.css:57 records the moment the gap bit: "sm 2px KEEP verbatim (no
     sub-8px token exists — don't invent one)". One exists now, and it is Figma's,
     not invented. Roles are aliased in tokens-semantic.css. */
  --r-rail: 1px;                   /* Figma radius/rail  — progress rails, 1-2px bars */
  --r-rule: 2px;                   /* Figma radius/rule  — ticks, marks, hairline chips (skeleton--sm's verbatim 2px) */
  --r-focus: 3px;                  /* Figma radius/focus — the ring around inline text/links, which have no box of their own */

  /* G0-2 tier NAMES survive the move — value repointed, name kept, so nothing
     renames and every existing consumer keeps resolving (alias-never-rename).
     --r-lg 26px (hero/marketing) stays the flagship, unchanged.
     NB marketing is NOT affected: marketing/m-tokens.css:46-47 defines its own
     --r-sm 8px / --r-md 14px and loads after this file, so the pill-and-14px
     marketing voice is untouched by the product ladder (two-voice rule, G0-4). */
  --r-md: var(--r-12);             /* WAS var(--r-chip) 14px. 2026-07-29: the card tier is 12px. --r-chip keeps its own 14px landing value above — the tier no longer borrows it */
  --r-sm: var(--r-12);             /* WAS var(--r-ck) 8px. 2026-07-29: the control tier is 12px. --r-ck keeps its own 8px landing value above; tab-button's 8px now comes from --r-tab-top */

  /* radius [from product] — Tailwind default utilities the product actually uses */
  --radius-product-lg: 0.5rem;     /* [from product] grep apps+packages — rounded-lg, standard for buttons/inputs/tabs (498 uses) */
  --radius-product-xl: 0.75rem;    /* [from product] grep apps+packages — rounded-xl, modal (109 uses) */
  --radius-product-full: 9999px;   /* [from product] grep apps+packages — rounded-full (744 uses) */

  /* --------------------------------------------------------------------------
     CORNER SMOOTHING 0.6 — A DOCUMENTED GAP, DELIBERATELY NOT FAKED
     --------------------------------------------------------------------------
     Every rounded node in the Figma file now carries cornerSmoothing 0.6 (the
     iOS "squircle": the corner is a continuous curvature blend, not a circular
     arc). CSS has NO equivalent. `border-radius` is strictly elliptical, and
     there is no property, no shorthand and no vendor prefix that produces it.

     So code and Figma DIVERGE here, on purpose, and this comment is the record
     of it. Do not "fix" this by guessing a larger radius — a bigger arc is a
     different shape, not a smoother one, and it walks straight into the
     half-the-height lint rule above.

     THE ONE HONEST OPTION, with its real cost, so nobody re-derives it later:
       Draw the squircle yourself and clip to it —
         `clip-path: path(...)` or an SVG mask, per component, per size.
       Cost: the path is a function of BOTH box dimensions, so it must be
       regenerated whenever the element resizes (JS + ResizeObserver, or a
       fixed-size-only rule). It also kills `overflow` painting of the real
       border and any box-shadow spread, which then have to be redrawn inside
       the clipped shape. That is a component-architecture change on ~50
       surfaces, not a token change, and it is why it is not being done here.

     Until that is funded, product corners are circular arcs at the values above
     and the Figma file is smoother than the build. Known, measured, accepted.
     -------------------------------------------------------------------------- */


  /* ==========================================================================
     SHADOW
     ========================================================================== */
  --shadow-soft: 0 1px 2px rgba(28,12,40,.05), 0 8px 24px -10px rgba(28,12,40,.10);  /* landing forwarder:41 / shipper:25 */
  --shadow-card: 0 1px 2px rgba(28,12,40,.05), 0 24px 60px -22px rgba(74,3,79,.20);  /* landing forwarder:42 — canonical (shipper:26 alpha .18, see divergences.json) */
  --shadow-pop: 0 40px 100px -32px rgba(74,3,79,.42);  /* landing forwarder:43 — canonical (shipper:27 alpha .40, see divergences.json) */

  /* composed effect shadows (from landing recipes) */
  --shadow-primary-btn: 0 12px 30px -10px rgba(158,27,176,.62);           /* landing forwarder:96-98 / shipper:62-63 — primary button glow (rest) */
  --shadow-primary-btn-hover: 0 20px 46px -12px rgba(158,27,176,.7);      /* landing forwarder:96-98 / shipper:62-63 — primary button glow (hover) */
  /* --------------------------------------------------------------------------
     INNER SHADOWS — REMOVED FILE-WIDE 2026-07-29 (founder-approved, Figma)
     --------------------------------------------------------------------------
     Figma dropped every INNER_SHADOW: 4 effect styles and 21 component nodes.
     Two styles — material/sunken and material/recessed — held ONLY inner
     shadows and are now EMPTY. These two tokens are their CSS counterparts, so
     the `inset` layers come off here too. What survives is only what survived
     in Figma: the outer drop shadow.
     -------------------------------------------------------------------------- */
  --shadow-bezel: 0 8px 18px -10px rgba(158,27,176,.5);  /* NEW NAME 2026-07-29 for the machined icon bezel, now that it carries no inset. WAS --shadow-inset-bezel = `inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 18px -10px rgba(158,27,176,.5)` (landing forwarder:373 / shipper:237) — the two inset layers are gone, the outer glow is byte-identical */
  --shadow-inset-bezel: var(--shadow-bezel);  /* DEPRECATED alias for --shadow-bezel — the name says "inset" and the value no longer is. Kept so nothing breaks (same pattern as --mode-road). Do not use in new code. */
  --shadow-inset-core: none;   /* DEAD 2026-07-29. WAS `inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px var(--line-soft)` (landing forwarder:412 / shipper:145 — bezel core). It was inset-ONLY, so removing the inner shadows leaves nothing: this is the CSS reading of the now-EMPTY Figma style. Resolves to `none` rather than being deleted, so any consumer degrades to no shadow instead of an unresolved var. Do not use in new code. */
  --shadow-hot-ring: 0 0 0 1px var(--primary-500), 0 8px 20px -8px rgba(211,66,240,.5);  /* landing forwarder:295 / shipper:162 — hot-card/best ring */
  --shadow-on-dark-cta: 0 12px 34px -12px rgba(0,0,0,.6);                 /* landing forwarder:112-113 / shipper:74-75 — dark-section CTA (rest) */
  --shadow-on-dark-cta-hover: 0 20px 50px -14px rgba(0,0,0,.7);           /* landing forwarder:112-113 / shipper:74-75 — dark-section CTA (hover) */

  /* error focus halo — mirrors the house focus-ring recipe (button.css:80-82),
     outer layer swapped --focus-ring → --error-500. Additive on invalid+focus;
     the persistent invalid border (--error-500) stays underneath. */
  --shadow-error: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--error-500);   /* #F2407B halo, 2px white offset (WCAG 1.4.11: white-vs-fill boundary carries the cue, same as focus ring) */

  /* dropShadow scale [from product] — references undefined vars (see note) */
  --drop-shadow-xs: 0 4px 15px 0 var(--shadow-xs);  /* [from product] apps/website/tailwind.config.ts:114 — NB --shadow-xs undefined in product; see divergences.json */
  --drop-shadow-sm: 0 4px 20px 0 var(--shadow-sm);  /* [from product] apps/website/tailwind.config.ts:115 — NB --shadow-sm undefined in product */
  --drop-shadow-md: 0 4px 25px 0 var(--shadow-md);  /* [from product] apps/website/tailwind.config.ts:116 — NB --shadow-md undefined in product */
  --drop-shadow-lg: 0 4px 30px 0 var(--shadow-lg);  /* [from product] apps/website/tailwind.config.ts:117 — NB --shadow-lg undefined in product */
  --drop-shadow-xl: 0 4px 30px 0 var(--shadow-xl);  /* [from product] apps/website/tailwind.config.ts:118 — NB --shadow-xl undefined in product */


  /* ==========================================================================
     BORDER
     ========================================================================== */
  --border-default: 1px solid var(--line);        /* landing forwarder:102,322,362 / shipper:67 — default border (#e8e3f0) */
  --border-soft: 1px solid var(--line-soft);      /* landing forwarder:290,444 / shipper:161,366 — soft/inner border (#f0ecf6) */
  --border-glass-nav: 1px solid rgba(231,227,239,.9);  /* landing forwarder:146 / shipper:95 — glass-nav border */
  --border-on-dark-shell: 1px solid rgba(255,255,255,.08);  /* landing forwarder:471,538 / shipper:305 — on-dark shell (.06–.08) */
  --border-on-dark-card: 1px solid rgba(255,255,255,.14);   /* landing forwarder:564 — on-dark card */
  --border-honesty-dashed: 1px dashed var(--line);          /* landing forwarder:532 / shipper:320 — dashed honesty-note */
  --border-foot: 1px solid rgba(255,255,255,.1);            /* landing forwarder:589 / shipper:345 — footer borders */

  /* decorative accent bars */
  --bar-feat-tag: 14px;            /* landing forwarder:417 / shipper:244 — feat-tag::before width (×1.5px primary-500) */
  --bar-feat-tag-h: 1.5px;         /* landing forwarder:417 — feat-tag::before height */
  --bar-mbhead-w: 3px;             /* landing forwarder:285 — mbhead .bar width */
  --bar-mbhead-h: 12px;            /* landing forwarder:285 — mbhead .bar height */
  --bar-nav-underline: 2px;        /* landing forwarder:157 — nav-link underline / step-line height */


  /* ==========================================================================
     TEXTURE — grain + grid overlays
     ========================================================================== */
  --grain-opacity: .02;            /* landing forwarder:70-71 — grain overlay opacity (shipper:39-40 = .018, see divergences.json) */
  --grain-base-frequency: 0.85;    /* landing forwarder:70-71 / shipper:39-40 — feTurbulence fractalNoise baseFrequency */
  --grain-num-octaves: 3;          /* landing forwarder:70-71 / shipper:39-40 — feTurbulence numOctaves */
  --grid-line-dark: rgba(255,255,255,.045);  /* landing forwarder:178-182,543-546 — dark hero/section grid line */
  --grid-size-hero: 66px;          /* landing forwarder:178-182 — hero grid background-size */
  --grid-size-band: 60px;          /* landing forwarder:543-546 / shipper:308-310 — offer/fee grid background-size */
  --card-hover-glow: radial-gradient(120% 80% at 0% 0%, rgba(211,66,240,.06), transparent 60%);  /* landing forwarder:364-367 — pain-card hover glow sweep */


  /* ==========================================================================
     MOTION — easings + durations
     ========================================================================== */
  --ease: cubic-bezier(0.22, 0.61, 0.18, 1);        /* landing forwarder:44 / shipper:28 — primary ease-out for transitions/reveals */
  --ease-spring: cubic-bezier(0.34, 1.32, 0.46, 1); /* landing forwarder:45 / shipper:28 — overshoot spring for icon/converge/hover-lift */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);    /* M3 (M0 specC) — ENTERS: fast in, gentle settle (enter/reveal/open); same visual family as --ease, named for role */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);    /* M3 (M0 specC) — EXITS: gentle start, fast departure (close/dismiss/out); mirror ease-in of a standard ease-out */

  --dur-reveal: .9s;               /* landing forwarder:602 / shipper:358 — reveal system */
  --dur-hover: .55s;               /* landing forwarder:89 / shipper:56 — hover transform/shadow (.5–.6s); button base */
  --dur-bg: .35s;                  /* landing forwarder:89 / shipper:56 — button background transition */
  --dur-nav: .5s;                  /* landing forwarder:148 / shipper — nav transition */
  --dur-sheen: .8s;                /* landing forwarder — btn-hero sheen sweep */
  --dur-underline: .4s;            /* landing forwarder — nav link underline */
  --dur-converge: .85s;            /* landing forwarder:334-350 — signature convergence spring */
  --dur-rail-fill: 2.6s;           /* landing shipper:412 — tracking-rail fill */
  --dur-route-draw: 3.4s;          /* landing shipper — SVG route stroke-dashoffset draw */
  --dur-pulse: 2.4s;               /* landing forwarder:210 / shipper:138 — pulse keyframes */

  /* Generic motion ladder (M0 specC) — role-named rungs; ALIASES of live durations, no new magic numbers */
  --motion-fast:     100ms;        /* = --dur-exit — micro/exit tier */
  --motion-moderate: 150ms;        /* = --dur-control / --motion-duration — standard component tier */
  --motion-slow:     250ms;        /* accordion band ceiling — expand/collapse tier */

  --reveal-translate: 34px;        /* landing forwarder:602-604 / shipper:358-360 — .reveal initial translateY */
  --reveal-blur: 6px;              /* landing forwarder:602-604 / shipper:358-360 — .reveal initial blur */
  --reveal-d1: .08s;               /* landing forwarder:602-604 / shipper:358-360 — stagger delay 1 */
  --reveal-d2: .16s;               /* landing forwarder:602-604 / shipper:358-360 — stagger delay 2 */
  --reveal-d3: .24s;               /* landing forwarder:602-604 / shipper:358-360 — stagger delay 3 */
  --reveal-d4: .32s;               /* landing forwarder:602-604 / shipper:358-360 — stagger delay 4 */


  /* ==========================================================================
     BREAKPOINTS [from product] — landings use inline media queries at ~760/980px;
     product defines the canonical named screen scale. md DIVERGES (see below).
     ========================================================================== */
  --screen-sm: 360px;              /* [from product] apps/website/tailwind.config.ts:109 (all 3 apps) */
  --screen-md: 1025px;             /* [from product] apps/website/tailwind.config.ts:110 — website (admin/LF = 768px, see divergences.json) */
  --screen-lg: 1280px;             /* [from product] apps/website/tailwind.config.ts:111 (all 3 apps) */
}