/* ============================================================================= LikeFlow design tokens Spec: docs/design-system-tokens-2026-08.html Load order: this file comes FIRST, before styles.css and every component stylesheet. It is additive — a superset of the :root block compiled into assets/styles.css from input.css — so importing it changes nothing until call sites move onto the new names. Tier 1 primitives raw ramps, no meaning. Only Tier 2 may read them. Tier 2 semantic --lf-*, aliases only. The whole theme surface. Tier 3 component declared on the component's own selector, never here. Tier 2 is currently split: the legacy --lf-* aliases still live in site-canvas.css and are NOT redeclared here, so there is exactly one definition site per token. They merge into this file in migration step 3. ========================================================================== */ /* ============================================================================= Tier 1 — primitives ========================================================================== */ :root { /* --- colour channels ---------------------------------------------------- Space-separated so they compose with slash-alpha: rgb(var(--ch-brand-blue) / var(--a-04)) The comma-separated --brand-*-rgb tokens at the bottom of this block are deprecated: mixing them with slash-alpha produces invalid CSS and the browser drops the whole declaration. */ --ch-white: 255 255 255; --ch-black: 0 0 0; --ch-scrim: 5 6 10; /* 20 hand-written instances collapse here */ --ch-canvas: 7 8 13; --ch-surface-low: 11 13 21; --ch-surface: 17 20 31; --ch-foreground: 247 245 252; --ch-brand-blue: 41 98 255; --ch-brand-blue-tint: 130 167 255; /* Tailwind `secondary` */ --ch-brand-violet-tint: 188 167 255; /* Tailwind `primary` */ --ch-brand-violet: 123 63 242; --ch-brand-pink: 255 77 157; /* --- alpha ramp --------------------------------------------------------- 68 distinct alpha values ship today. The rungs below are the peaks of that distribution, not a guessed geometric series: it is dense at the low end where a 0.04 step doubles the ink, and coarse at the top where 0.92 and 0.96 are indistinguishable. Every value in the codebase moves by at most 0.07 onto its rung. Named for the value (--a-42 is 0.42), so adding a rung later never renumbers an existing one. */ --a-04: 0.04; /* hairline wash */ --a-42: 0.42; /* strong border */ --a-08: 0.08; /* subtle fill */ --a-55: 0.55; /* heavy veil */ --a-10: 0.10; /* resting border */ --a-62: 0.62; /* glass surface */ --a-12: 0.12; /* raised border */ --a-72: 0.72; /* dense glass */ --a-14: 0.14; /* fill, soft glow */ --a-85: 0.85; /* scrim */ --a-18: 0.18; /* active border */ --a-95: 0.95; /* near-opaque */ --a-24: 0.24; /* shadow body */ --a-30: 0.30; /* emphasis fill */ /* --- brand -------------------------------------------------------------- */ --brand-blue: #2962ff; --brand-blue-tint: #82a7ff; --brand-blue-soft: #b5caff; /* Tailwind `secondary-fixed` */ --brand-violet: #7b3ff2; --brand-violet-tint: #bca7ff; --brand-pink: #ff4d9d; --brand-pink-tint: #ff9ac8; --brand-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-violet) 50%, var(--brand-pink) 100%); --brand-gradient-contrast: linear-gradient(rgba(7, 8, 13, 0.24), rgba(7, 8, 13, 0.24)), var(--brand-gradient); /* --- neutral surfaces ---------------------------------------------------- */ --canvas: #07080d; --surface-low: #0b0d15; --surface: #11141f; --surface-high: #1a1e2b; --surface-highest: #24293a; --text-primary: #f7f5fc; --text-secondary: #bfc0ce; /* --- status (was six unnamed literals in the Affiliate grid) ------------- */ --status-success: #4ee58c; --status-warning: #ffbe6b; --status-danger: #ffb4ab; --status-info: #34d9f5; /* --- spacing: 4px grid, index = px / 4 ----------------------------------- Rungs 7, 9, 11, 18 and 26 are new. They are the values the codebase was already reaching for by hand (28px ×20, 36px ×3, 44px ×1, 72px ×3, 104px ×4) and the reason pages.css referenced an undefined --space-7. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-24: 96px; --space-26: 104px; /* --- radius (16 distinct → 7) -------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-card: 20px; --radius-panel: 24px; --radius-full: 999px; /* --- motion ------------------------------------------------------------- Rungs are named by role, not by index: a value can be retuned later without renumbering every call site. Each rung sits on a real cluster in the shipped CSS — the count is how many raw declarations fall into it. --dur-entrance is 520ms rather than a round 500ms because hero-carousel.js:212 and workflow-demo.js:226 wait exactly 520ms; the token and the JS timer must not drift apart. */ --dur-instant: 60ms; /* stagger step 4 */ --dur-fast: 120ms; /* icon, colour swap 5 */ --dur-base: 180ms; /* DEFAULT — hover, border, opacity 88 */ --dur-moderate: 220ms; /* transform, small move 21 */ --dur-slow: 260ms; /* card lift, panel 20 */ --dur-reveal: 320ms; /* scroll reveal 11 */ --dur-entrance: 520ms; /* section entrance, paired with JS 11 */ --dur-long: 650ms; /* long choreography 5 */ --dur-ambient: 900ms; /* looping background 9 */ --dur-ambient-slow: 1200ms; /* slow loop 4 */ /* Only the two bezier curves get tokens; `ease-in-out` and `linear` are CSS keywords and are already their own canonical spelling. */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* the signature curve, 20 uses */ /* --- typography (91 distinct sizes → 11 steps) --------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Two regimes, on purpose. 11/12/13 is micro-UI — eyebrow, caption, label — where a 1px step is a category change, not a ratio. From 15px up the scale follows ~1.12-1.15 and carries content hierarchy. Pretending the micro band is part of the modular progression is what produced four rungs inside 3px. The old --text-3xs (10px) is gone: it sat below the readable floor and its 15 call sites are label text. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; /* 13 -> 15 ratio 1.15 */ --text-md: 17px; /* 15 -> 17 ratio 1.13 */ --text-lg: 19px; /* 17 -> 19 ratio 1.12 */ /* Fluid steps. Six, not four: the shipped CSS holds 35 bespoke clamp() expressions and they cluster into six groups, not four. Forcing them onto four would have moved some headings by 20px at desktop. Each step is the centre of a real cluster; the largest move onto a step is 10px at the cap. Three clamps stay bespoke on purpose: the hero ghost word and the two features-navigator background numerals run 194-280px. They are decorative typography, not a scale step. */ /* min 20px, not 18px: --text-lg is a fixed 19px, so an 18px floor made --text-xl render SMALLER than --text-lg on every viewport below 1056px. Each clamp floor must clear the fixed step beneath it. */ --text-xl: clamp(20px, 1.8vw, 26px); --text-2xl: clamp(22px, 2.4vw, 32px); --text-3xl: clamp(30px, 3.4vw, 43px); --text-4xl: clamp(34px, 4.2vw, 48px); /* Ratio profile across the display band: 1.37, 1.23, 1.34, 1.12, 1.42, 1.35. The 1.12 between --text-3xl (43px) and --text-4xl (48px) is the outlier — five pixels apart where the neighbours jump a third. Both are in use (7 and 9 call sites), so they are left alone rather than merged blind; merging them is a 16-site change that wants eyes on the result. */ --text-5xl: clamp(38px, 5vw, 68px); --text-display: clamp(46px, 6.2vw, 92px); --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Rungs sit on the clusters in the shipped CSS, not on a guessed series. The previous set had no rung at 1.2 — the single most used value, ten declarations — so it snapped to 1.25 and the real cluster stayed literal. */ --leading-flat: 1; /* display slabs 3 */ --leading-display: 1.05; /* 1.02-1.06 10 */ --leading-tight: 1.2; /* 1.10-1.20, headings 14 */ --leading-snug: 1.32; /* 1.28-1.38, subheads 11 */ --leading-normal: 1.45; /* 1.40-1.45, UI copy 6 */ --leading-relaxed: 1.6; /* 1.55-1.75, long form 8 */ /* Display type needs negative tracking well past -0.02em; eighteen declarations sat between -0.12em and -0.04em with no rung to land on. --tracking-wide and --tracking-wider keep their values: they already cover their clusters within 0.02em and moving them would churn 10 sites for no visible gain. */ --tracking-tightest: -0.07em; /* -0.12 to -0.06, display 9 */ --tracking-tighter: -0.05em; /* -0.055 to -0.04, headings 9 */ --tracking-tight: -0.02em; /* -0.03 to -0.01 5 */ --tracking-normal: 0; --tracking-wide: 0.08em; /* 0.045 to 0.09, labels 6 */ --tracking-wider: 0.16em; /* 0.10 to 0.17, eyebrows 7 */ /* --- elevation ----------------------------------------------------------- 67 distinct box-shadow values ship today, but only 4 geometry clusters: blur <=12, ~24, ~30 and >=48. Each rung below is the mode of its cluster. Elevation and brand glow are kept separate so a lifted card composes them (box-shadow: var(--shadow-3), var(--glow-accent)) instead of hand-tuning a new two-layer shadow every time. */ --shadow-1: 0 2px 8px rgb(var(--ch-black) / var(--a-18)); --shadow-2: 0 10px 24px rgb(var(--ch-black) / var(--a-24)); --shadow-3: 0 14px 30px rgb(var(--ch-black) / var(--a-24)); --shadow-4: 0 24px 70px rgb(var(--ch-black) / var(--a-42)); --shadow-inset-top: inset 0 1px rgb(var(--ch-white) / var(--a-08)); --blur-sm: 12px; --blur-md: 20px; --blur-lg: 34px; /* --- z ladder (11 ad-hoc integers → 7 named rungs) ----------------------- */ --z-below: -1; --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-header: 60; --z-overlay: 90; --z-modal: 100; /* --- layout -------------------------------------------------------------- */ --grid-size: 64px; --grid-size-mobile: 48px; /* No --bp-* tokens: a custom property cannot be used in a media query condition (@media (min-width: var(--bp-md)) is invalid CSS), so they would be dead by construction. Breakpoints are documented in design-system/MASTER.md and enforced by review, not by a token. Tiers: 375 / 640 / 768 / 1024 / 1280. */ /* --- deprecated ---------------------------------------------------------- Kept so nothing breaks mid-migration. Deleted in migration step 5 once grep is clean. Do not use in new code. */ --brand-blue-rgb: 41, 98, 255; --brand-violet-rgb: 123, 63, 242; --brand-pink-rgb: 255, 77, 157; --border-subtle: rgba(247, 245, 252, 0.1); --border-brand: rgba(var(--brand-violet-rgb), 0.42); --glow-blue: rgba(var(--brand-blue-rgb), 0.3); --glow-violet: rgba(var(--brand-violet-rgb), 0.32); --glow-pink: rgba(var(--brand-pink-rgb), 0.26); --duration-fast: 150ms; --duration-normal: 180ms; --duration-slow: 300ms; } /* ============================================================================= Tier 2 — semantic additions Only tokens that do not already exist in site-canvas.css are declared here, so every --lf-* has exactly one definition site during the migration. ========================================================================== */ :root { --lf-surface-glass: rgb(var(--ch-surface) / var(--a-62)); --lf-scrim: rgb(var(--ch-scrim) / var(--a-85)); --lf-accent-solid: var(--brand-blue); /* CTA fills; --lf-accent is text */ --lf-on-accent: var(--text-primary); --lf-border-strong: rgb(var(--ch-brand-blue) / var(--a-42)); /* Form controls only. 3.35:1 against the field surface — the decorative --border-subtle measures 1.30:1 and fails WCAG 2.2 SC 1.4.11 when it is the only thing identifying an input. Audit finding H-3. */ --lf-border-control: rgb(var(--ch-foreground) / 0.38); /* Makes the 44px rule in design-system/MASTER.md enforceable in CSS rather than a sentence nobody can lint. Audit finding H-2. */ --lf-target-min: 44px; /* Fluid section rhythm. The 108-184px values in the shipped CSS are section padding inside clamp(), not micro-spacing — snapping them onto the 4px scale would be wrong. Every endpoint is still a multiple of 4. */ --lf-section-pad-sm: clamp(56px, 7vw, 96px); /* light section */ --lf-section-pad-md: clamp(72px, 8vw, 120px); /* standard section */ --lf-section-pad-lg: clamp(88px, 10vw, 148px); /* major section */ --lf-section-pad-xl: clamp(104px, 12vw, 184px); /* hero, page top */ } /* ============================================================================= Deliberately not wired yet These groups are defined but have no consumer. That is a decision, not rot: --font-sans, --text-*, --weight-*, --leading-*, --tracking-* Typography is 91 distinct sizes today, including 45 bespoke clamp() expressions with unrelated viewport slopes. Collapsing them changes text size across every page, so it belongs to a typography pass with eyes on the result, not to a find-and-replace. --lf-target-min, --lf-border-control The fixes for audit H-2 (44px touch targets) and H-3 (form borders at 1.30:1, below the 3:1 that WCAG 1.4.11 requires). Both are ready; wiring them grows controls and brightens borders, so they wait for a review. --status-*, --ch-brand-violet, --ch-brand-pink Consumed when the Affiliate card variants are renamed from colour to role (audit M-5). --lf-elevation-*, --lf-motion-*, --lf-surface-glass, --lf-scrim, --lf-accent-solid, --lf-on-accent, --lf-border-strong Tier 2 aliases for components that still read Tier 1 directly. They get consumers when site-canvas.css merges into this file. ========================================================================== */ /* ============================================================================= Global reduced-motion guard MASTER.md requires a reduced-motion fallback on every transition. Per-file guards missed site-header.css (5 transitions + 1 animation) and faq-list.css (3 transitions). One global rule closes that class of bug permanently instead of once per component. Audit finding H-4. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }