/* rebuild/tokens.css : the design-token hook layer for the SMPL flagship rebuild conversion spine. Declares every token the structural layer consumes, as CSS custom properties, so the shells render token-agnostic and Sloane's design pass slots in without touching one line of structure. What it is: The single contract surface between Sloane (design) and the structural shells (rebuild/spine.css + the section shells). Every color, type, spacing, radius, and motion value the shells use is read through a var() declared HERE. The shells reference token NAMES only, never literals, so a palette or type-scale change is a one-file edit here, never a structural edit. Why this shape (rationale): - Token-agnostic by construction. Wes' build-prep brief: "expose Sloane's tokens as CSS custom-property hooks, defined-but-unset, so they slot in without touching structure." This file IS that surface. - @layer ordering makes the cascade deterministic regardless of order. Sloane's eventual token file declares into `@layer tokens` (or a later layer) and overrides these defaults with zero specificity fights. - Two tiers of default, deliberately distinct (see the two blocks below): (1) COLOR tokens carry the Vera-LOCKED spec values (direction §7) as their reference default. These are already locked by strategy, not open design decisions, so seeding them makes the scaffold viewable in the real dark-cinematic register. Sloane confirms/refines, does not invent. (2) TYPE / SPACE / MOTION tokens carry neutral structural placeholders. These ARE Sloane's open decisions, so they are intentionally bland. Do not read them as final; they exist only so the shells lay out. Rejected alternative: Hardcoding the palette into the shells (front-runs Sloane, makes every design pass a structural refactor) and leaving tokens literally valueless (scaffold renders unstyled, un-reviewable). The two-tier default above gives a viewable scaffold AND a clean override seam. Refactor targets (expected, not debt): - Sloane replaces every value in the TYPE / SPACE / MOTION block. - Sloane confirms or refines the COLOR block against her execution pass. - If a shared component library is extracted later, this file is the seed. */ @layer tokens, structure, motion; @layer tokens { :root { /* ---------------------------------------------------------------------- COLOR · Vera-LOCKED reference defaults (direction §7). Confirmed by strategy, not open design. Sloane confirms/refines; structure never reads these literals, only the var names. ---------------------------------------------------------------------- */ /* Semantic signal. The ONE accent. Appears at EXACTLY four sites and nowhere else: scan score, key metric, primary CTA, active nav. Scarcity is the point. If it shows up a fifth time it stops meaning anything. */ --color-signal: #c2ff00; --color-signal-soft: rgba(194, 255, 0, 0.20); /* glow-state CTA only */ /* Surface ladder. Four near-black stops for depth without light. NOT flat black. Section backgrounds step down this ladder; they never go to #000. */ --surface-1: #07080a; /* deepest, page base */ --surface-2: #0d0d0d; --surface-3: #101111; --surface-4: #121212; /* raised cards, highest stop */ /* Reading + structure. */ --color-ink: #f2f0ec; /* primary reading text on dark */ --color-ink-muted: rgba(242, 240, 236, 0.64); --color-ink-faint: rgba(242, 240, 236, 0.42); --color-hairline: rgba(242, 240, 236, 0.08); --color-hairline-2: rgba(242, 240, 236, 0.16); /* Functional state (carried from /scan so the embed reads as one system). */ --color-warn: #f5c542; --color-bad: #f5705f; /* ---------------------------------------------------------------------- TYPE · LOCKED (Sloane, 2026-06-08). Families already locked by strategy; scale, weight, and rhythm are locked here. ---------------------------------------------------------------------- */ --font-display: 'Bebas Neue', sans-serif; /* oversized hero — locked */ --font-body: 'DM Sans', sans-serif; /* reading + UI — locked */ /* DM Sans feature activation. Tnum = digits align in tables and metrics. Calt/kern/liga = zero-cost typographic craft signal. */ --font-body-features: 'tnum' 1, 'calt' 1, 'kern' 1, 'liga' 1; /* Type scale: minor-third ramp (×1.25), clamped for fluid response. Hero stays Bebas Neue; body hierarchy uses DM Sans weight alone. */ --type-hero: clamp(3.25rem, 10vw, 7rem); /* display, two lines max */ --type-h2: clamp(2rem, 4.5vw, 3.25rem); --type-h3: clamp(1.375rem, 2.5vw, 1.75rem); --type-h4: clamp(1.125rem, 1.75vw, 1.25rem); --type-body: clamp(1rem, 1.1vw, 1.0625rem); --type-small: 0.8125rem; --type-eyebrow: 0.6875rem; /* Leading. Bebas Neue compresses well below 1; body text breathes wider. */ --leading-tight: 0.95; /* hero display */ --leading-snug: 1.2; /* h2/h3 */ --leading-body: 1.72; /* reading text */ --leading-loose: 1.9; /* FAQ answers, legal fine-print */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Negative tracking tightens large Bebas Neue into a premium block. Eyebrow gets wide positive tracking to read as a label, not a word. */ --tracking-display: -0.015em; --tracking-eyebrow: 0.22em; --tracking-body: 0.005em; /* ---------------------------------------------------------------------- SPACE / SHAPE · LOCKED (Sloane, 2026-06-08). Scale is a minor-third progression from 6px base (0.375rem). ---------------------------------------------------------------------- */ --space-1: 0.375rem; /* 6px — tight inline gap */ --space-2: 0.75rem; /* 12px — component breathing room */ --space-3: 1rem; /* 16px — base unit */ --space-4: 1.5rem; /* 24px — card padding, form rows */ --space-5: 2.5rem; /* 40px — section sub-divisions */ --space-6: 4.5rem; /* 72px — between major blocks */ --space-7: 7rem; /* 112px — hero/above-fold breathing */ --space-section: clamp(5rem, 12vw, 9rem); /* inter-section vertical rhythm */ --measure-read: 66ch; /* reading column max (slightly tighter = more premium) */ --measure-wide: 1120px; /* layout container max */ --measure-answer: 52ch; /* AEO answer-first block — one tight column */ --gutter: clamp(1.25rem, 5vw, 2.5rem); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 100px; /* tags, badges */ /* ---------------------------------------------------------------------- MOTION · LOCKED (Sloane, 2026-06-08). Kai's layer reads these. Expo-out for reveals (snappy start, long drift); symmetric in-out for interactive states. Duration ladder: fast for hover, base for reveals, slow for page-level transitions. ---------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out — decisive snap */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric — interactive */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot — accent moments only */ --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 480ms; --reveal-rise: 22px; /* translateY for .reveal-item — slightly more rise than /scan */ } }