/* Brand font — Figtree (LI.FI 1.0, the default brand). Since the typography axis landed (CLAUDE.md → "Typography axis"), this @import + the --font-sans token below are the FIRST-PAINT MIRROR of the default preset's `font` field (presets.js → lifi-1 `font: 'figtree'`) — the same hand-maintained CSS↔JS mirror as the :root colour seeds (check-theme-tokens.py TC7). When the default brand's font changes, flip all three together: this @import, the --font-sans token, and the preset's `font` field (+ revision bump). The JetBrains Mono @import below is the same first-paint mirror for the default MONO family (presets.js → lifi-1 `mono: 'jetbrains-mono'` + the --font-mono token; TC7 checks both). The mono typography sub-axis lazy- loads any OTHER mono family (e.g. LI.FI 2.0 → IBM Plex Mono) on apply. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400..900&display=swap'); /* ═══════════════════════════════════════════════════════════════ LI.FI Design System — styles.css ─────────────────────────────────────────────────────────────── Single source of truth for all shared visual styles. Edit here → changes propagate to every page automatically. ┌─────────────────────────────────────────────────────────────┐ │ COLOR SYSTEM: OKLCH │ │ │ │ oklch(L C H) │ │ │ │ └── Hue 0–360° (color wheel angle) │ │ │ └────── Chroma 0–0.4+ (colorfulness) │ │ └───────── Lightness 0–100% (perceptual) │ │ │ │ Why OKLCH over hex/rgba: │ │ • Perceptually uniform — L=50% looks equally bright │ │ across every hue, so palette steps are visually even │ │ • Contrast-predictable — adjusting L guarantees legibility │ │ • One token flip (dark ↔ light) is all that's needed; │ │ no more scattered rgba(255,255,255,X) overrides │ │ │ │ LI.FI hue anchor: 264° (blue) │ │ Brand hues: 264° blue · 183° teal · 308° pink │ └─────────────────────────────────────────────────────────────┘ Contents: 1. Reset & Design Tokens (incl. Page Ambient Background) 3. Navbar & Mega Dropdown 4. Mobile Menu 5. Buttons 6. Section Primitives 7. Footer 8. Theme Toggle 9. Light Theme Overrides (structural only — tokens handle the rest) 10. Shared Responsive Breakpoints (Section 2, Page Glow Background, was removed when the 5-orb legacy system was replaced by the body::before/body::after ambient.) ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════ 1. RESET & DESIGN TOKENS ══════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ────────────────────────────────────────── Font Family Tokens ────────────────────────────────────────── Two families, two roles: --font-sans Figtree — content + UI (default, set on `html`) --font-mono JetBrains Mono — code, addresses, numerics, eyebrows Documented at #typography → "Font families" card. The `` tag in each HTML page loads Figtree (300–900) + JetBrains Mono (400–700) from Google Fonts; these tokens just name the families so every font-family rule in this file references a token, never a literal. Bug history (May 2026): these declarations lived in the retired `lifi-design-system.css` and got dropped when that file was killed, silently breaking every `font-family: var(--font-mono)` usage in the catalog (mono fell back to inherited Figtree). Restored here so the cascade source for fonts matches the rest of the system — styles.css declares once, every consumer reads via the token. */ /* First-paint mirror of the default preset's `font` field (presets.js → lifi-1 'figtree'; see the @import comment at the top of this file). Per-theme fonts are the Theme Composer's typography axis (THEME_FONTS, theme-composer-core.js) — a theme apply overrides this token on its scope; this literal is only what paints before/without a pick. */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Jumper sibling-brand sans (jumper.xyz). The type SCALE, weights ladder, and --font-mono are shared across both brands — only the sans family differs. Consumers that render Jumper-brand chrome (lockup labels, future Jumper surfaces) reach for this token; pages that use it must load Urbanist themselves (Google Fonts) — unloaded pages fall back to the same system stack as --font-sans. Spec: design-system/foundations.html#typography. */ --font-jumper: 'Urbanist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* ────────────────────────────────────────── OKLCH Brand Primitives (hue-locked to 268° — the LI.FI 1.0 blue axis) ────────────────────────────────────────── */ /* ── Brand Accent Tiers ─────────────────────────────────── */ /* Primary: Accent 1 — CTAs, links, key actions */ /* Secondary: Accent 2 — secondary CTAs, labels, badges */ /* Tertiary: Accent 3 — highlights, tags, decorative */ --lifi-sapphire: oklch(52% 0.18 269); /* Primary accent — Sapphire #405CCF, native in BOTH modes. June 2026: the dark lift (was L0.66) was dropped so the filled-CTA label auto-flips to white AND passes AA on the dark page (white-on-L0.66 was 2.86:1, fails; on native L0.52 it's 5.14:1). Brand-seed token, named for the palette (renamed from --lifi-blue June 2026). */ --lifi-sapphire-mid: oklch(62% 0.1584 269); /* Primary mid — accent TEXT / focus / link. First-paint literal kept in lockstep with the runtime: deriveTokens recomputes --accent-primary-mid as seed+10L (= L0.62 now the seed is L0.52), so this mirrors it to avoid a cold-load FOUC. On the dark page L0.62 gives accent text 5.16:1 (AA); identical to the light mid now that both seeds are L0.52. */ --lifi-sapphire-light: oklch(96% 0.0234 269); /* Primary light — tinted bg surface (soft brand wash) */ --lifi-pink: oklch(88% 0.1 322); /* Secondary accent — Pink #F7C2FF (renamed from --lifi-teal June 2026). */ --lifi-ink: oklch(66% 0.063 276); /* Tertiary accent — Ink, text-capable, lifted on dark (renamed from --lifi-pink June 2026). */ --lifi-dark: oklch(18.5% 0.063 276); /* Foundation — Ink #0C0E2E */ /* ── Official brand ramps — 2.0 Brand Book (Figma 409:75) ───────── The three brand colours as hand-tuned 9-step scales (1 = lightest tint, 9 = darkest shade). LI.FI 1.0 CONSTANTS — static literals (the exact book hexes → OKLCH), NOT Theme-Composer-derived. Anchors coincide with the seeds above: sapphire-6 = --lifi-sapphire (light) #405CCF · signal-2 = --lifi-pink #F7C2FF · midnight-9 = --lifi-dark / --surface-page (dark) #0C0E2E. Naming avoids the neutral --ink-0..900 alpha ladder (§ further down). */ --midnight-1: oklch(96.5% 0.0164 275); /* #F0F3FF */ --midnight-2: oklch(89.9% 0.0180 276); /* #DADDEA */ --midnight-3: oklch(82.0% 0.0313 275); /* #BEC3D9 */ --midnight-4: oklch(72.0% 0.0457 275); /* #9CA3C2 */ --midnight-5: oklch(59.9% 0.0633 276); /* #757DA6 */ --midnight-6: oklch(48.0% 0.0622 275); /* #535B81 */ --midnight-7: oklch(37.1% 0.0626 275); /* #363D61 */ --midnight-8: oklch(26.9% 0.0576 276); /* #1F2342 */ --midnight-9: oklch(18.5% 0.0631 276); /* #0C0E2E — Ink */ --sapphire-1: oklch(95.7% 0.0220 244); /* #E5F3FF */ --sapphire-2: oklch(89.6% 0.0503 264); /* #CCDDFF */ --sapphire-3: oklch(82.1% 0.0795 269); /* #AFC3F9 */ --sapphire-4: oklch(72.0% 0.1001 269); /* #8BA2E4 */ --sapphire-5: oklch(59.9% 0.1242 269); /* #627BCA */ --sapphire-6: oklch(52.0% 0.1803 269); /* #405CCF — Sapphire */ --sapphire-7: oklch(37.0% 0.1690 269); /* #1F2F97 */ --sapphire-8: oklch(27.1% 0.1795 269); /* #0F007C */ --sapphire-9: oklch(22.2% 0.1438 272); /* #0D005C */ --signal-1: oklch(96.6% 0.0275 322); /* #FDEEFF */ --signal-2: oklch(88.0% 0.0997 322); /* #F7C2FF — Pink */ --signal-3: oklch(82.0% 0.0502 322); /* #D4BAD8 */ --signal-4: oklch(72.0% 0.0720 322); /* #BA96C0 */ --signal-5: oklch(60.1% 0.0992 322); /* #9C6CA4 */ --signal-6: oklch(47.9% 0.0998 322); /* #77497F */ --signal-7: oklch(36.9% 0.0987 322); /* #572B5E */ --signal-8: oklch(27.0% 0.0906 322); /* #3A1340 */ --signal-9: oklch(17.6% 0.0840 321); /* #200026 */ /* ── Jumper sibling-brand primitives (jumper.xyz) ───────────────── Brand constants for rendering the Jumper logo + lockups on any surface — NOT Theme Composer accents (those live in presets.js → jumper-1 / jumper-2 and are user-selectable). Mode-paired to Jumper's own published tokens: accent1-main #31007A (light) ↔ #653CA2 (dark), accent2-main #8700B8 (light) ↔ #B49BDA (dark). The logo SVGs reference these via style="fill: var(--jumper-…, #lightFallback)" so inline marks flip with the mode while standalone /downloaded copies render the light-mode brand literals. Assets: logos/jumper/. Spec: design/components/imagery.md → Brand lockup. */ --jumper-indigo: oklch(46% 0.158 298); /* logo body + wordmark — renders #653CA2 in dark */ --jumper-purple: oklch(73% 0.093 302); /* logo accent piece — renders #B49BDA in dark */ /* Semantic accent aliases — use these everywhere instead of --lifi-* */ --accent-primary: var(--lifi-sapphire); --accent-primary-mid: var(--lifi-sapphire-mid); --accent-primary-light: var(--lifi-sapphire-light); --accent-secondary: var(--lifi-pink); --accent-tertiary: var(--lifi-ink); /* ── Semantic state tokens — formula-derived from --brand-anchor ── The four roles (success / danger / warn / info) are not hand-typed oklch literals anymore — they are LIVE FUNCTIONS of the brand anchor (--brand-anchor → var(--lifi-sapphire) by default). When the Theme Composer swaps --lifi-sapphire (LI.FI 1.0 → 2.0 → custom), every semantic and every bg/border companion auto-rebalances via pure CSS cascade. No JS wiring; no manual retune. The doctrine: H = role canonical hue (locked per role) L = anchor_L + role_L_offset (theme-aware) C = max(anchor_C, 0.12) × role_C_mult (theme-aware; floored) Each OKLCH channel has a different owner: H carries role meaning (green = success, red = danger, etc.) L carries system weight (semantic legibility band) C carries brand voice (saturation matches brand signature; the 0.12 input floor keeps a muted / monochrome anchor from collapsing the states to grey — multiplicative chroma can't recover from 0. Mirrors theme-composer-core.js → SEM_C_FLOOR; keep the pair in lockstep) The role_L_offset and role_C_multiplier are TUNABLE — bound to --sem-{role}-L-offset and --sem-{role}-C-mult so the Theme Composer's "Semantic states" section can mutate them live, PER THEME (June 2026 — the Semantic Composer merge; a theme record's optional `semantics` field carries per-mode lo/cm + role hues, painted by theme-composer-core.js → applyPalette: coefficient vars here at :root, resolved literals on scoped canvases). The defaults below MIRROR theme-composer-core.js → SEM_DEFAULTS — keep the two in lockstep when retuning. Token docs: design-system/foundations.html#semantic-composer. Bg / border companion tones derive from the role anchor itself (preserving hue, swapping in theme-aware L+C constants from --sem-bg-L / --sem-bg-C / --sem-border-L / --sem-border-C). Browser support: OKLCH relative-color syntax — Chrome 119+, Safari 16.4+, Firefox 128+. Evergreen-safe by 2026. ────────── */ --brand-anchor: var(--lifi-sapphire); /* Per-role formula coefficients — DARK-mode defaults. Anchor = --brand-anchor = --lifi-sapphire (Sapphire), dark L=0.52 (unified with light — June 2026). Output L = anchor.L + offset: success: 0.52+0.180=0.70, C=0.18*0.770=0.139, H=160 danger: 0.52+0.100=0.62, C=0.18*0.950=0.171, H= 24 warn: 0.52+0.240=0.76, C=0.18*0.730=0.131, H= 74 info: 0.52+0.180=0.70, C=0.18*0.730=0.131, H=269 L-offsets bumped +0.14 (June 2026) when the dark Sapphire anchor dropped 0.66→0.52 for the white-CTA-label unification — the semantics derive their lightness from the anchor, so the bump keeps the dark states at their original, AA-legible output (danger 4.75:1, info 6.93, success 7.46, warn 8.55 on the dark page). C-mult + H unchanged. Keep in lockstep with theme-composer-core.js SEM_DEFAULTS.dark. */ --sem-success-L-offset: 0.180; --sem-success-C-mult: 0.770; --sem-success-H: 160; --sem-danger-L-offset: 0.100; --sem-danger-C-mult: 0.950; --sem-danger-H: 24; --sem-warn-L-offset: 0.240; --sem-warn-C-mult: 0.730; --sem-warn-H: 74; --sem-info-L-offset: 0.180; --sem-info-C-mult: 0.730; --sem-info-H: 269; /* Surface-tier recipe — bg / border use these constants (theme-aware, overridden in light mode). Role H feeds in via the role anchor. */ --sem-bg-L: 0.20; --sem-bg-C: 0.05; --sem-border-L: 0.34; --sem-border-C: 0.10; /* The four semantic anchors — formula-derived via OKLCH relative-color syntax. Reading the anchor's L and C from --brand-anchor, applying the per-role offset/multiplier, locking the hue to the role's H. */ --success: oklch(from var(--brand-anchor) calc(l + var(--sem-success-L-offset)) calc(max(c, 0.12) * var(--sem-success-C-mult)) var(--sem-success-H)); --danger: oklch(from var(--brand-anchor) calc(l + var(--sem-danger-L-offset)) calc(max(c, 0.12) * var(--sem-danger-C-mult)) var(--sem-danger-H)); --warn: oklch(from var(--brand-anchor) calc(l + var(--sem-warn-L-offset)) calc(max(c, 0.12) * var(--sem-warn-C-mult)) var(--sem-warn-H)); --info: oklch(from var(--brand-anchor) calc(l + var(--sem-info-L-offset)) calc(max(c, 0.12) * var(--sem-info-C-mult)) var(--sem-info-H)); /* Companion bg / border tones — color-mix recipes derived from the role token itself. Same pattern buttons use for hover backgrounds (`--btn-accent-bg`). Every Semantic Composer slider (L / C / H) produces a visible change on alert + notification surfaces because the bg/border scale with the role's full color, not with system constants. Design history: v1 — hand-typed oklch literals per role, per theme. v2 — derived companion: `oklch(from var(--success) h)`. Hit a browser caching bug: when `--success` is itself a relative-color `oklch(from --brand-anchor calc(l + ...) ...)`, Chrome / Safari / Firefox cache the source's resolved L+C at compute time. Slider-driven L-offset / C-mult changes updated `--success` but did NOT propagate to the dependent. Only `h` cascaded cleanly. v3 — flat oklch( ) using --sem-bg-L / --sem-bg-C / --sem--H. Cascade worked correctly, but L-offset and C-mult sliders still didn't reach bg/border because the recipe locked L+C to system constants — system-uniform but visually inert against Composer tuning. v4 (current, May 2026) — color-mix from the role token. All three slider channels now flow through. Trade-off accepted: warn / info / danger / success bg's L+C now varies slightly per role (each scales with its own --success / --danger / etc.), losing the prior system-wide pastel uniformity. The Composer's job is visible feedback; buttons + progress have always behaved this way; alerts + notifications now match. The `--sem-bg-L / --sem-bg-C / --sem-border-L / --sem-border-C` constants are retained as light/dark anchors for any future tier that wants the system-uniform recipe (currently unused). */ /* May 2026 — alert / notification bg palette calibrated to 14 % tone-over-transparent. 10 % originally read as muddy tan/beige in light mode (90 % white + 10 % vivid tone collapses the perceived hue); 18 % then over-corrected and read as loud across the four tones. 14 % is the middle ground — the tone reads as itself ("yellow", "green", "blue", "red") without dominating the surface. Border tokens kept (no consumer right now; .alert dropped its border in the same pass — see .alert rule) for future tier use. */ --success-bg: color-mix(in oklch, var(--success) 14%, transparent); --success-border: color-mix(in oklch, var(--success) 30%, transparent); --success-fg: var(--success); --danger-bg: color-mix(in oklch, var(--danger) 14%, transparent); --danger-border: color-mix(in oklch, var(--danger) 30%, transparent); --danger-fg: var(--danger); --warn-bg: color-mix(in oklch, var(--warn) 14%, transparent); --warn-border: color-mix(in oklch, var(--warn) 30%, transparent); --warn-fg: var(--warn); --info-bg: color-mix(in oklch, var(--info) 14%, transparent); --info-border: color-mix(in oklch, var(--info) 30%, transparent); --info-fg: var(--info); /* On-color tokens — the accessible text color to use when placing text on a full-saturation version of each tone. Uses the same luminance-threshold formula as .btn-primary's --btn-on-accent: pick near-black text for backgrounds with L > 0.62, near-white text for backgrounds with L < 0.62. Ride the Theme Composer automatically — swap --accent-primary to a dark hue and text flips to white without any component edit. */ --on-accent-primary: oklch(from var(--accent-primary) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); --on-accent-secondary: oklch(from var(--accent-secondary) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); --on-accent-tertiary: oklch(from var(--accent-tertiary) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); --on-success: oklch(from var(--success) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); --on-danger: oklch(from var(--danger) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); --on-warn: oklch(from var(--warn) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); --on-info: oklch(from var(--info) clamp(0.08, (0.62 - l) * 100, 0.96) 0 0); /* ────────────────────────────────────────── Spectrum — extended brand palette (12 OKLCH hues at 30° spacing) ────────────────────────────────────────── The brand color system has two layers: Identity (3) — --accent-primary / -secondary / -tertiary Carries brand identity. Shifts with the Palette Composer (LI.FI Blue / Across / Uniswap). Spectrum (12) — --spectral-1..12 (this block) Extends the palette for content where the color carries no semantic meaning — categorical data, illustration fills, decorative blocks. Stays put across preset switches so chart data reads the same regardless of which brand is active. Sibling tiers (defined elsewhere): Semantic → status: --success / --warn / --error / --info Series → chart-curated subset of Spectrum, defined below Neutrals → --ink-*, --surface-* OKLCH parameters — DASHBOARD-DISCIPLINE DIRECTION (Apr 2026 v3). Apr 2026 v2 pushed chroma toward the gamut ceiling (C 0.18–0.30, L 0.58–0.82) for "vibrant" decorative use, but that wide band created a "muddy" read on dashboards — magenta at C 0.30 screamed next to teal at C 0.18, lightness drifted 24 points across indices so adjacent series had different visual weights, and the single universal set forced cool hues to fail AA contrast on light backgrounds (failed 4.5:1 against #FFFFFF for L > 0.65). v3 keeps the 12-hue / 30°-spacing architecture but applies five disciplines from the Omni Analytics theme work — see design.md §02 "Palette grammar" for the full rules: 1. Tight L band per mode Dark L 0.66–0.84 (yellows the only outlier — they need higher L to read as yellow, not olive), most colors in 0.70–0.78 (8-pt). Light L 0.45–0.66 (yellows again the high outlier). 2. Tight C band C 0.18–0.24 — magenta caps at 0.24 (was 0.30), teal floors at 0.18 in dark / 0.13 in light (gamut limit). 3. Dual-mode tokens --spectral-N-dark and --spectral-N-light are CONSTANTS, always available. --spectral-N is the theme-aware alias. Every cool hue clears 3:1 contrast against its mode-appropriate tile bg (WCAG 1.4.11 for graphical objects); blues/magentas clear 4.5:1. 4. Brand anchor preserved --spectral-9 (blue) light-mode value is exactly LI.FI Blue (#3F49E1 / oklch 0.44 0.23 268). The dashboard's primary series reads as the brand by default. 5. Hue array unchanged 20°, 50°, 80°, 110°, 140°, 175°, 205°, 235°, 265°, 295°, 325°, 355° — preserves the index→named-color contract (--spectral-1 === --spectral-coral, etc.). Continuity — every var(--spectral-N) consumer in the codebase keeps working unchanged but gets a more disciplined value AND auto-adapts to light mode. No call-site changes required. Naming — numeric for iteration (--spectral-1..12), named aliases (--spectral-blue) for prose. Both forms first-class. Sibling palettes added in v3: Sequential — --seq-1..9 (single-hue blue ramp, dual-mode) Diverging — --div-1..9 (Pink ↔ Slate ↔ Green, dual-mode, mode-agnostic neutral) ────────────────────────────────────────── */ /* Dark-mode primitives — always available, used as default alias source. */ --spectral-1-dark: oklch(0.72 0.20 20); /* coral · #FF8C7A */ --spectral-2-dark: oklch(0.74 0.20 50); /* orange · #FF9358 */ --spectral-3-dark: oklch(0.82 0.18 80); /* amber · #FFB454 */ --spectral-4-dark: oklch(0.84 0.20 110); /* lime · #C5E866 */ --spectral-5-dark: oklch(0.78 0.22 140); /* green · #5EEAA0 */ --spectral-6-dark: oklch(0.76 0.18 175); /* teal · #3DD9D9 */ --spectral-7-dark: oklch(0.78 0.18 205); /* cyan · #42E2F5 */ --spectral-8-dark: oklch(0.74 0.20 235); /* sky · #67BAFF */ --spectral-9-dark: oklch(0.70 0.22 265); /* blue · #7B86FF — brand-anchor in dark mode */ --spectral-10-dark: oklch(0.66 0.22 295); /* violet · #9B5DE5 */ --spectral-11-dark: oklch(0.72 0.24 325); /* magenta · #D472FA */ --spectral-12-dark: oklch(0.76 0.22 355); /* rose · #FF8FCB */ /* Light-mode primitives — always available; activated via --spectral-N alias in [data-theme="light"]. */ --spectral-1-light: oklch(0.55 0.21 20); /* coral · #DC4A4A */ --spectral-2-light: oklch(0.58 0.20 50); /* orange · #C9722E */ --spectral-3-light: oklch(0.66 0.16 80); /* amber · #B58A1A */ --spectral-4-light: oklch(0.62 0.20 110); /* lime · #6EA214 */ --spectral-5-light: oklch(0.55 0.20 140); /* green · #0E9D5C */ --spectral-6-light: oklch(0.55 0.13 175); /* teal · #008483 */ --spectral-7-light: oklch(0.55 0.16 205); /* cyan · #007D9B */ --spectral-8-light: oklch(0.50 0.20 235); /* sky · #1862C8 */ --spectral-9-light: oklch(0.44 0.23 268); /* blue · #3F49E1 — exact LI.FI Blue */ --spectral-10-light: oklch(0.45 0.22 295); /* violet · #7C3AED */ --spectral-11-light: oklch(0.50 0.24 325); /* magenta · #C042E0 — brand-darker pink */ --spectral-12-light: oklch(0.55 0.22 355); /* rose · #E1538F */ /* Theme-aware aliases — default to dark; [data-theme="light"] re-points. */ --spectral-1: var(--spectral-1-dark); --spectral-2: var(--spectral-2-dark); --spectral-3: var(--spectral-3-dark); --spectral-4: var(--spectral-4-dark); --spectral-5: var(--spectral-5-dark); --spectral-6: var(--spectral-6-dark); --spectral-7: var(--spectral-7-dark); --spectral-8: var(--spectral-8-dark); --spectral-9: var(--spectral-9-dark); --spectral-10: var(--spectral-10-dark); --spectral-11: var(--spectral-11-dark); --spectral-12: var(--spectral-12-dark); /* Named aliases — same values, prose-friendly. */ --spectral-coral: var(--spectral-1); --spectral-orange: var(--spectral-2); --spectral-amber: var(--spectral-3); --spectral-lime: var(--spectral-4); --spectral-green: var(--spectral-5); --spectral-teal: var(--spectral-6); --spectral-cyan: var(--spectral-7); --spectral-sky: var(--spectral-8); --spectral-blue: var(--spectral-9); --spectral-violet: var(--spectral-10); --spectral-magenta: var(--spectral-11); --spectral-pink: var(--spectral-12); /* ────────────────────────────────────────── Sequential Palette — single-hue Blue ramp (Apr 2026 v3, NEW) ────────────────────────────────────────── For dashboards: heatmaps, choropleths, density plots, any "more is more" metric. 9 stops with a perceptually uniform lightness ramp anchored on H 265 (brand axis). Direction by mode: Dark mode — low → high goes deep navy (L 0.20) → near-white-blue (L 0.94). High data value reads as "brighter" against the dark tile. Light mode — low → high goes near-white (L 0.96) → deep navy (L 0.16). High data value reads as "darker" against the white tile. The semantic --seq-1..9 is "low → high" data; the visual reading flips per mode. Brand-anchor lands at stop 6 in both modes. ────────────────────────────────────────── */ /* Sequential — dark-mode primitives. */ --seq-1-dark: oklch(0.20 0.10 265); /* low · #1F2147 deep navy */ --seq-2-dark: oklch(0.28 0.13 265); /* · #2A2D6B */ --seq-3-dark: oklch(0.36 0.16 265); /* · #363B92 */ --seq-4-dark: oklch(0.44 0.20 265); /* · #424ABB */ --seq-5-dark: oklch(0.54 0.22 265); /* · #5159E0 */ --seq-6-dark: oklch(0.66 0.22 265); /* · #7B86FF brand-anchor */ --seq-7-dark: oklch(0.76 0.20 265); /* · #A0AAFF */ --seq-8-dark: oklch(0.86 0.16 265); /* · #C5CCFF */ --seq-9-dark: oklch(0.94 0.08 265); /* high · #E2E5FF near-white-blue */ /* Sequential — light-mode primitives. */ --seq-1-light: oklch(0.96 0.04 265); /* low · #EEF0FF */ --seq-2-light: oklch(0.90 0.08 265); /* · #D8DCFF */ --seq-3-light: oklch(0.82 0.12 265); /* · #B8BFFF */ --seq-4-light: oklch(0.72 0.18 265); /* · #959DFF */ --seq-5-light: oklch(0.60 0.22 265); /* · #7079FF */ --seq-6-light: oklch(0.44 0.23 268); /* · #3F49E1 brand-anchor (LI.FI Blue) */ --seq-7-light: oklch(0.36 0.20 265); /* · #4148E0 */ --seq-8-light: oklch(0.26 0.16 265); /* · #2A30AB */ --seq-9-light: oklch(0.16 0.10 265); /* high · #171B6B deep navy */ /* Theme-aware aliases. */ --seq-1: var(--seq-1-dark); --seq-2: var(--seq-2-dark); --seq-3: var(--seq-3-dark); --seq-4: var(--seq-4-dark); --seq-5: var(--seq-5-dark); --seq-6: var(--seq-6-dark); --seq-7: var(--seq-7-dark); --seq-8: var(--seq-8-dark); --seq-9: var(--seq-9-dark); /* ────────────────────────────────────────── Diverging Palette — Pink ↔ Slate ↔ Green (Apr 2026 v3, NEW) ────────────────────────────────────────── For benchmark deltas — negative ↔ neutral ↔ positive. 9 stops, perceptually balanced. Pink/Green axis (not Red/Green) keeps it LI.FI-aligned AND CVD-safe — under deuteranopia the Pink end becomes muted lavender and Green stays distinguishable. Stop semantics: --div-1..4 negative side (worst → least-bad) --div-5 neutral / zero delta (mode-agnostic slate) --div-6..9 positive side (least-good → best) The neutral midpoint is identical across modes (oklch 0.66 0.02 250 / #94A3B8) — a "no change" cell reads as the same color in dark and light dashboards. ────────────────────────────────────────── */ /* Diverging — dark-mode primitives. */ --div-1-dark: oklch(0.65 0.22 350); /* −1 · #FF5C8E sat pink */ --div-2-dark: oklch(0.72 0.18 350); /* −.75 · #FF85AB */ --div-3-dark: oklch(0.80 0.14 350); /* −.5 · #FFAEC7 */ --div-4-dark: oklch(0.88 0.08 350); /* −.25 · #FFD7E3 */ --div-5-dark: oklch(0.66 0.02 250); /* 0 · #94A3B8 slate */ --div-6-dark: oklch(0.85 0.10 160); /* +.25 · #A8E5C7 */ --div-7-dark: oklch(0.78 0.16 160); /* +.5 · #7AD8A6 */ --div-8-dark: oklch(0.70 0.20 160); /* +.75 · #4FCB85 */ --div-9-dark: oklch(0.62 0.22 160); /* +1 · #1FB364 sat green */ /* Diverging — light-mode primitives. */ --div-1-light: oklch(0.50 0.24 350); /* −1 · #C4248A */ --div-2-light: oklch(0.58 0.22 350); /* −.75 · #D85AA1 */ --div-3-light: oklch(0.70 0.18 350); /* −.5 · #E78AB8 */ --div-4-light: oklch(0.82 0.10 350); /* −.25 · #F0BBD0 */ --div-5-light: oklch(0.66 0.02 250); /* 0 · #94A3B8 slate (same as dark) */ --div-6-light: oklch(0.80 0.12 160); /* +.25 · #AED9C5 */ --div-7-light: oklch(0.62 0.18 160); /* +.5 · #7AC1A1 */ --div-8-light: oklch(0.50 0.20 160); /* +.75 · #3FA77E */ --div-9-light: oklch(0.42 0.20 160); /* +1 · #0F8A5E */ /* Theme-aware aliases. */ --div-1: var(--div-1-dark); --div-2: var(--div-2-dark); --div-3: var(--div-3-dark); --div-4: var(--div-4-dark); --div-5: var(--div-5-dark); --div-6: var(--div-6-dark); --div-7: var(--div-7-dark); --div-8: var(--div-8-dark); --div-9: var(--div-9-dark); /* ────────────────────────────────────────── Series Palette — curated 8-color subset of Spectrum for charts ────────────────────────────────────────── Apr 2026 v3 — same indices as v2 (blue/orange/green/magenta is the canonical primary-quartet for the most common 4-series case), but the underlying spectral values are now mode-aware (see above) so series colors auto-adapt between dark and light dashboards without a separate token swap. Use these for data viz only — never for UI chrome. ────────────────────────────────────────── */ /* THE CHARTS AXIS CAN OVERRIDE THIS TIER (June 2026): a theme record's `charts: 'brand'` makes the Theme Composer paint --series-1..12 inline (on :root or a scoped canvas) as a generated 12-hue ramp anchored on the theme's primary hue, L/C sampled from the spectral discipline curve (theme-composer-core.js → CHART_DISCIPLINE — keep in lockstep with the spectral primitives above). 'spectral' (the default) leaves these aliases standing. --spectral-* is NEVER overridden — avatar tones + decorative consumers stay fixed. See CLAUDE.md → "Charts axis". */ --series-1: var(--spectral-9); /* blue */ --series-2: var(--spectral-2); /* orange */ --series-3: var(--spectral-5); /* green */ --series-4: var(--spectral-11); /* magenta */ --series-5: var(--spectral-3); /* amber */ --series-6: var(--spectral-7); /* cyan */ --series-7: var(--spectral-10); /* violet */ --series-8: var(--spectral-1); /* coral */ /* Extended series — 9–12 fill the remaining spectral hues not consumed by 1–8 (4 lime, 6 teal, 8 sky, 12 rose) so a 12-category chart spans the full hue circle with no adjacent-bar collisions. Reach for these only when 1–8 aren't enough; the canonical primary-quartet (1–4) still leads in dashboards. */ --series-9: var(--spectral-4); /* lime */ --series-10: var(--spectral-6); /* teal */ --series-11: var(--spectral-8); /* sky */ --series-12: var(--spectral-12); /* rose */ /* ────────────────────────────────────────── Semantic Surface Tokens (Dark mode defaults) Lightness steps: 5 → 8 → 16 → 24 % (sunk → page → raised → card) May 2026 rebalance (v2) — bumped raised 14→16 and card 19→24 for a more confident lift on every dark-mode panel and card. Step sizes are now uniform (8 % between page→raised and raised→card) for consistent visual rhythm. Light values unchanged. History: pre-rebalance was 8 → 10 → 15 (2 % page→raised, too tight); v1 went 8 → 14 → 19 (closer to Material 3 container tier); v2 is the current 8 → 16 → 24 step. ────────────────────────────────────────── */ --surface-sunk: oklch(17% 0.063 276); /* recessed canvas / well — recess below Ink page so wells read recessed */ --surface-page: oklch(18.5% 0.063 276); /* page background — Ink #0C0E2E */ --surface-raised: oklch(23.2% 0.0577 275); /* raised surface — Ink #161A38 (2.0 Brand Book scale; pinned for lifi-1 via Manual mode, mirrored here for first-paint) */ /* Card-tier surface fill — what cards, tiles, and paper-material consumers reach for to lift above the canvas. Dark: L31 (#262C55, the 2.0 Brand Book card tier), above the L23.2 raised (#161A38) and the L18.5 Midnight-Ink page — keeps cards clearly lifted against deep-ink themes (e.g. Jumper 1.0's deep-indigo page). Light: pivots to --surface-page (100% white) so cards lift via shadow alone — see [data-theme="light"] override below. Materials definitions and the Theme Composer both write through this token, so the theme pivot lives in ONE place. */ --surface-card: oklch(31% 0.0735 275); /* card tier — Ink #262C55 (2.0 Brand Book scale; pinned for lifi-1 via Manual mode, mirrored here for first-paint) */ /* ── Elevation shadow tokens — DARK MODE ─────────────────── System-wide rule: prefer elevation over hard borders. A card or row reads as "lifted off the page" via three coordinated mechanics — a fill one step above the page surface (--surface-raised / --surface-card), a soft drop shadow, and a 1 px inset top highlight that catches the rim of the card like ambient light. The inset highlight is the dark-mode trick: shadows on dark backgrounds barely register, but a subtle white-at-low-alpha rim sells the lift. Three tiers map to physical depth: --elev-1 resting cards & rows (setting-row, feature-card) --elev-2 hover state, active sticky cards, tooltips --elev-3 floating surfaces — modals, popovers, dropdowns Authors should reach for the tier, not hand-author shadows. */ --elev-1: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04); --elev-2: 0 4px 14px -2px rgba(0,0,0,0.45), 0 2px 4px -1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); --elev-3: 0 24px 56px -8px rgba(0,0,0,0.55), 0 8px 16px -4px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.06); /* Filter-form of the elevation tokens — MASKED elements ONLY (box-shadow is the canonical method; box-shadow is clipped by mask, drop-shadow paints AFTER the mask so it wraps the cutout). VALUE-MATCHED to the --elev-N twin so a masked surface matches its box-shadow neighbours. Dark --elev-1 has a single OUTSET layer (its second layer is the inset rim, which drop-shadow can't replicate), so the dark filter is a single drop-shadow that matches that outset exactly. See CLAUDE.md → "mask-image clips box-shadow". */ --elev-1-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); --elev-2-filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)) drop-shadow(0 2px 4px rgba(0,0,0,0.25)); --elev-3-filter: drop-shadow(0 24px 56px rgba(0,0,0,0.55)) drop-shadow(0 8px 16px rgba(0,0,0,0.30)); /* Glass panel base — one elevation step LIGHTER than --surface-page in both themes. Dark: surface-page + 8% white tint → visibly lighter. Light: surface-page + 50% white tint → pushes toward pure white. Every glass surface (navbar, FAB panel, sub-header) mixes this with transparent to get its glass fill. */ --glass-base: color-mix(in oklch, var(--surface-page), white 8%); /* ── Glass-panel surface recipe — single source of truth ────────── The shared surface for EVERY floating glass panel and menu — `.navbar::before`, `.cmd-palette__panel`, `.dropdown__panel`, `.ds-doc-menu-panel`, `.playground-rail`, and any future glass surface. They all read as the same surface (untinted, neutral, brand-tinted edge) because they all consume these three tokens. If you find yourself writing a panel background + shadow + blur by hand, reach for these tokens instead — never fork the recipe. Recipe lifted to navbar parity in May 2026 (was a one-tier-lower panel glass before then). The +12% white mix on the bg + accent halo on the shadow are what make the surface feel "premium" — that quality now ships on every glass panel, not just the navbar. The navbar's hand-rolled override at `.navbar:hover::before` is retired; both navbar and panels share this recipe. Light-mode shadow values are overridden in [data-theme="light"] below; the surface fill auto-flips via --glass-base. */ --surface-panel-glass: color-mix(in oklch, color-mix(in oklch, var(--glass-base), white 12%) 78%, transparent); --shadow-panel-glass: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 40px -12px color-mix(in oklch, #000 55%, transparent), 0 2px 8px -4px color-mix(in oklch, var(--accent-primary) 10%, transparent); --backdrop-panel-glass: blur(40px) saturate(140%); /* ── Materials — surface character bundles ──────────────────────── A material is the visible character of a surface — fill + border + shadow + backdrop-filter + edge highlight, bundled and named. Components consume the resolved layer (--mat-*) and stay material-agnostic; the active material is chosen via `data-material="…"` on the element, or via a :where() default for components that always wear one material. Three layers: 1. DEFINITIONS --material--{bg,border,shadow,backdrop,highlight} The full character of each named material. Light/dark flips happen at the upstream tokens this layer composes (--surface-*, --elev-*, --shadow-panel-glass), so the Materials block needs NO [data-theme="light"] override. 2. RESOLVED API --mat-{bg,border,shadow,backdrop,highlight} What components actually consume. Defaults to PAPER at :root; [data-material] selectors below override per-element. 3. CONSUMERS .card { background: var(--mat-bg); ... } Reference --mat-*, never reference the definitions directly inside a component rule. That keeps cards material-agnostic and lets [data-material] swap them. OKLCH at the definition site only. Materials compose --surface-*, --lifi-* and accent tokens; never bake hex/oklch literals here (the LI.FI 1.0 FOUC bug pattern — see CLAUDE.md → "LI.FI 1.0 is the only default" and "feedback_lifi-2-fouc-derivative-tokens"). Catalog: #materials in design-system/index.html. Spec: design.md §02 → Materials. */ /* Paper — opaque solid + soft drop + 1px hairline. The default for stat-cards, feature-cards, action-cards, action containers. References --surface-card (theme-aware) so it lifts above the canvas in both modes — dark = 24% lightness, light = pivots to --surface-page so cards lift via shadow alone. */ --material-paper-bg: var(--surface-card); --material-paper-border: 1px solid color-mix(in oklch, var(--text-primary) 6%, transparent); --material-paper-shadow: var(--elev-1); --material-paper-shadow-hover: var(--elev-2); --material-paper-backdrop: none; --material-paper-highlight: 0 0 0 0 transparent; /* Glass — translucent + backdrop-blur + neutral drop + edge highlight. Aliases the canonical Panel Surfaces 3-token recipe so the visual diff is zero for existing glass consumers (.ds-doc-menu-panel, .dropdown__panel, .playground-rail). The inset edge highlight is baked INTO --shadow-panel-glass already, so --material-glass-highlight stays empty (don't double-stack it). May 2026 — `frosted` retired and merged into glass. Marketing tiles (.tile / .feature-card / .enterprise-card) now wear glass by default. */ --material-glass-bg: var(--surface-panel-glass); --material-glass-border: 0 solid transparent; --material-glass-shadow: var(--shadow-panel-glass); --material-glass-shadow-hover: var(--shadow-panel-glass); /* glass is already a floating surface; hover keeps the shadow */ --material-glass-backdrop: var(--backdrop-panel-glass); --material-glass-highlight: 0 0 0 0 transparent; /* `--accent-tint` parametric base — consumed by halo and gradient backgrounds, plus any per-component accent wash. Override per element via inline style or per-component CSS. */ --accent-tint: var(--lifi-ink); /* Gradient — brand gradient fill + minimal chrome. Hero KPIs, marketing accent surfaces, cover tiles. Composes --lifi-sapphire + --lifi-ink so the gradient flips through any palette switch via the brand tokens. */ --material-gradient-bg: linear-gradient(135deg, var(--lifi-sapphire), var(--lifi-ink)); --material-gradient-border: 1px solid color-mix(in oklch, white 12%, transparent); --material-gradient-shadow: var(--elev-2); --material-gradient-shadow-hover: var(--elev-3); --material-gradient-backdrop: none; --material-gradient-highlight: inset 0 1px 0 rgba(255,255,255,0.18); /* Halo — soft accent-tinted card with a radial glow anchored to the top-right corner. Promoted from the .brand-card / .tile.brand-card visual signature (May 2026). The recipe is two layers stacked into one `background:` value: 1. Top: radial-gradient ellipse at top-right → 12% accent fading to transparent at 70% reach. The "halo." 2. Bottom: 3% accent over --surface-card. The base wash that gives the card its faint brand identity. Pairs with paper-style hairline border + --elev-1 drop. Use for brand-identity cards, premium feature tiles, "about this product" showcases — anywhere a card should feel quietly brand-forward without going full gradient. Parametric via --accent-tint. */ --material-halo-bg: radial-gradient(ellipse 85% 65% at 100% 0%, color-mix(in oklch, var(--accent-tint) 12%, transparent) 0%, transparent 70%), color-mix(in oklch, var(--accent-tint) 3%, var(--surface-card)); --material-halo-border: 1px solid color-mix(in oklch, var(--text-primary) 6%, transparent); --material-halo-shadow: var(--elev-1); --material-halo-shadow-hover: var(--elev-2); --material-halo-backdrop: none; --material-halo-highlight: 0 0 0 0 transparent; /* ── Resolved API — what components consume. PAPER is the default. Override per-element via [data-material="…"] (defined after the [data-theme="light"] block below) or per-component via a :where() default. Never reference --material-*-* inside a component rule; always read --mat-*. */ --mat-bg: var(--material-paper-bg); --mat-border: var(--material-paper-border); --mat-shadow: var(--material-paper-shadow); --mat-shadow-hover: var(--material-paper-shadow-hover); --mat-backdrop: var(--material-paper-backdrop); --mat-highlight: var(--material-paper-highlight); /* Navbar-scoped surface fills — used by the marketing navbar's mega-dropdown panel and mobile menu. Distinct from the surface ladder (these are translucent, scoped to nav chrome only). */ --nav-panel-bg: oklch(9.5% 0.019 268 / 0.95); /* mega-dropdown */ --nav-mobile-bg: oklch(8% 0.019 268 / 0.97); /* mobile menu */ /* ────────────────────────────────────────── Text Hierarchy (Dark mode defaults) WCAG contrast on --surface-page background: --text-primary ≈ 18 : 1 ✓✓ --text-secondary ≈ 9 : 1 ✓✓ --text-muted ≈ 5 : 1 ✓ --text-faint ≈ 3 : 1 (decorative only) ────────────────────────────────────────── */ /* Text — neutral white ALPHA ladder (the LI.FI 1.0 default; the default preset carries no `text` record, so the per-theme text-tint axis stays dormant until a tinted theme is applied — check-theme-tokens.py TC5 verifies this mirror in both directions). */ --text-primary: oklch(98% 0.0066 280); /* primary text — near-white on ink (text-tint axis) */ --text-secondary: oklch(76% 0.066 280); /* secondary — support tone #A9AEDC */ --text-muted: oklch(56% 0.0759 280); /* muted — metadata #6A70A0 */ --text-faint: oklch(44% 0.066 280); /* faint/decorative */ /* ────────────────────────────────────────── Icon colour family (May 2026) — semantic tokens for icon-only chrome (borderless icon buttons, dropdown carets, list-row affordances). Today these consume the text tokens so icons read at the same weight as the labels they sit next to. Defined as their own tokens so they can diverge from text colour later (e.g., chrome icons darker than body type, or a brand-tinted icon set on a hero surface) by editing ONE line each, without touching every consumer's rule. Always reference `--icon-*` (not `--text-*`) from icon-bearing components. ────────────────────────────────────────── */ --icon-primary: var(--text-primary); /* matches text today; overridable per-theme below */ --icon-muted: var(--text-muted); /* matches text today; overridable per-theme below */ /* ────────────────────────────────────────── Deprecated aliases (backwards compat — migrate to new names) ────────────────────────────────────────── */ --navy: var(--surface-page); /* deprecated — use --surface-page */ --white: var(--text-primary); /* deprecated — use --text-primary */ --text-2: var(--text-secondary); /* deprecated — use --text-secondary */ --text-3: var(--text-muted); /* deprecated — use --text-muted */ --text-4: var(--text-faint); /* deprecated — use --text-faint */ --gray: var(--text-muted); /* deprecated — use --text-muted */ --deep-blue: var(--surface-raised); /* deprecated */ --brand-blue: var(--accent-primary); /* deprecated — use --accent-primary */ --brand-pink: var(--accent-tertiary); /* deprecated — use --accent-tertiary */ /* ────────────────────────────────────────── Backwards-compat aliases — for tokens that used to live in lifi-design-system.css (the LI.FI 2.0 reference stylesheet). That file was unloaded from every DS page in Apr 2026 v4 to fix a flash-of-wrong-palette bug; this block re-exposes the same token names so any consumer (page CSS, inline styles, `style="…"` attributes, downstream HTML) continues to render without modification. Resolution strategy — wherever possible, alias to a canonical `--accent-*` / `--surface-page` / `--text-*` token via `color-mix`, so the value tracks the active Theme Composer preset AND auto-flips with `[data-theme="light"]`. The few hard-coded OKLCH values below sit in the neutral ramp (very low chroma) where hue parity matters less. New code should NOT reach for these — use the canonical name listed on each line. The old-name aliases stay so legacy surfaces don't break; nothing forces a rename. ────────────────────────────────────────── */ /* Spacing — short numeric scale; 1:1 with --space-* (4px base unit). */ --sp-1: var(--space-4); /* 4px — micro gap */ --sp-2: var(--space-8); /* 8px — base */ --sp-3: var(--space-12); /* 12px */ --sp-4: var(--space-16); /* 16px */ --sp-5: var(--space-20); /* 20px */ --sp-6: var(--space-24); /* 24px — default component padding */ --sp-8: var(--space-32); /* 32px — card / panel chrome */ --sp-10: var(--space-40); /* 40px */ --sp-12: var(--space-48); /* 48px */ --sp-16: var(--space-64); /* 64px — section gutter (tight) */ --sp-20: var(--space-80); /* 80px — section (default) */ --sp-24: var(--space-96); /* 96px — section (loose) */ /* Border radius — these are the system's only --r-* tokens; future work might rename to --radius-*, but for now `--r-*` IS canonical. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* Ink scale — neutral surface↔text ramp. Each step is a `color-mix` between page background and primary text, which auto-flips between dark and light themes (no override needed). Conventional reading: 0 = page bg, 900 = primary text — same orientation in both themes, the underlying values just swap. */ --ink-0: var(--surface-page); --ink-50: color-mix(in oklch, var(--surface-page) 92%, var(--text-primary) 8%); --ink-100: color-mix(in oklch, var(--surface-page) 85%, var(--text-primary) 15%); --ink-200: color-mix(in oklch, var(--surface-page) 75%, var(--text-primary) 25%); --ink-300: color-mix(in oklch, var(--surface-page) 60%, var(--text-primary) 40%); --ink-400: color-mix(in oklch, var(--surface-page) 45%, var(--text-primary) 55%); --ink-500: color-mix(in oklch, var(--surface-page) 30%, var(--text-primary) 70%); --ink-600: color-mix(in oklch, var(--surface-page) 22%, var(--text-primary) 78%); --ink-700: color-mix(in oklch, var(--surface-page) 14%, var(--text-primary) 86%); --ink-900: var(--text-primary); /* `--lifi-*-light` — pale background variants of the brand accents. Track the active palette automatically; readable on either theme because they're mixed against `--surface-page`. */ --lifi-sapphire-accessible: var(--accent-primary); /* AA-tuned variant; the active palette is already AA */ --lifi-pink-light: color-mix(in oklch, var(--accent-secondary) 14%, var(--surface-page)); --lifi-ink-light: color-mix(in oklch, var(--accent-tertiary) 14%, var(--surface-page)); /* ────────────────────────────────────────── Alpha Surface Scale (Dark mode defaults) Role-stable tokens for depth layering. Dark mode: white overlays lighten to elevate. Light mode: black overlays darken to recess, white overlays lighten to elevate. Components use these instead of raw color-mix() so zero [data-theme] overrides are needed. ────────────────────────────────────────── */ --alpha-dim: oklch(100% 0 0 / 0.04); /* wells, dividers, subtle bg */ --alpha-subtle: oklch(100% 0 0 / 0.08); /* tracks, input bgs, cards */ --alpha-moderate: oklch(100% 0 0 / 0.12); /* hover on subtle, containers */ --alpha-raised: oklch(100% 0 0 / 0.18); /* active tabs, elevated items */ --alpha-overlay: oklch(100% 0 0 / 0.24); /* hover on raised, popovers */ /* On-surface text — alpha foreground for layered UIs */ --on-alpha-faint: oklch(100% 0 0 / 0.35); /* disabled, decorative */ --on-alpha-muted: oklch(100% 0 0 / 0.55); /* secondary, inactive tabs */ --on-alpha-default: oklch(100% 0 0 / 0.80); /* primary readable text */ --on-alpha-strong: oklch(100% 0 0 / 1.00); /* emphasis, active labels */ /* Alpha border scale */ --alpha-border-dim: oklch(100% 0 0 / 0.05); --alpha-border-subtle: oklch(100% 0 0 / 0.10); --alpha-border-strong: oklch(100% 0 0 / 0.18); /* ────────────────────────────────────────── Adaptive Overlays (flip automatically via [data-theme] block) ────────────────────────────────────────── */ --overlay-hover: oklch(100% 0 0 / 0.04); /* subtle mouse-over tint */ --overlay-press: oklch(100% 0 0 / 0.09); /* icon bg / pressed state */ /* Brand-tinted overlay derives from --lifi-sapphire so first paint matches the active palette (LI.FI 1.0 by default). The composer's runtime override at shared.js → buildTokens replaces this when palettes change. */ --overlay-brand: color-mix(in oklch, var(--lifi-sapphire) 10%, transparent); /* State overlay recipe (sticky-active) lives at .tile / .feature-card / .enterprise-card — see comment above that ruleset. Defining it at :root would pre-resolve var(--tile-accent) here (unset → fallback to --accent-primary), baking brand-blue into the inherited value before consumers can override. Scoped to the tile family so var(--tile-accent) resolves per-element at compute time. */ /* ────────────────────────────────────────── Adaptive Borders / Dividers ────────────────────────────────────────── */ --border-subtle: oklch(100% 0 0 / 0.06); --border-brand: color-mix(in oklch, var(--lifi-sapphire) 15%, transparent); /* Content-aware swatch edge — the canonical swatch hairline (June 2026). A % of the INK (which flips per mode via --text-primary), NOT a fixed white border: a faint dark line in light mode, a faint light line in dark mode, and invisible on fills that already contrast the page (Sapphire, Pink). Only "shows" where the fill is near the page tone — Ink on dark, Paper on light — exactly where an edge is needed. Defined on :root (not .swatch) so EVERY swatch template resolves it — the card tile, --label-inside, AND the standalone .swatch-ramp__step (which is not a .swatch descendant). Tunable. */ --swatch-edge: color-mix(in oklch, var(--text-primary) 12%, transparent); /* ────────────────────────────────────────── Field Tokens — semantic input chrome Neutral surface elevation (white overlays on dark), theme-independent contrast. Inputs sit alongside buttons / segmented controls and inherit this chrome. ────────────────────────────────────────── */ /* Inputs read as a LIGHTER, raised field on the dark canvas (June 2026). Neutral overlays via --text-primary (pure white in dark) — palette-token, composer-safe (not brand-derived). */ --field-bg: color-mix(in oklch, var(--text-primary) 12%, transparent); --field-bg-hover: color-mix(in oklch, var(--text-primary) 16%, transparent); --field-bg-focus: color-mix(in oklch, var(--text-primary) 20%, transparent); --field-border: color-mix(in oklch, var(--text-primary) 12%, transparent); --field-border-hover: color-mix(in oklch, var(--text-primary) 22%, transparent); --field-border-focus: var(--accent-primary-mid); --field-ring: color-mix(in oklch, var(--accent-primary) 22%, transparent); --field-placeholder: var(--text-faint); /* ────────────────────────────────────────── Spacing System — 8px grid (4px half-step) ────────────────────────────────────────── Two layers: 1. CORE SCALE — raw px values, indexed by value. Use when a bespoke number is needed. Always prefer the semantic layer. 2. SEMANTIC TOKENS — named by intent (pad-chrome, stack-md, pad-section-y). Responsive: they remap to smaller core values at ≤900px and ≤600px in the breakpoints block. Rules: • Every px value in component CSS SHOULD be a --space-* token. • Canonical scale: 0, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 120, 160. 4 is the only half-step (micro gaps: badges, chip clusters, icon-to-label spacing). • Do NOT introduce 10, 12, 14, 18, 20, 22, 26, 28, 44, 52 — snap to the nearest grid value. • Line-height, font-size, border-radius, and border-width have their own scales and are exempt. ────────────────────────────────────────── */ /* Core scale — index = px. Half-grid steps (12, 20) live between the main 8px multiples. Use sparingly — prefer the main grid (8/16/24/32) whenever the component allows. 12 fills the gap between "tight" and "comfortable"; 20 between "comfortable" and "default padding". */ /* Geometry rule (Apr 2026 sweep): every component dimension — width, height, padding, margin, gap, border-radius — must resolve to a --space-* token below. Anything off the 4px grid is a bug (the only allowed exceptions are 1px / 2px hairlines for borders and dividers). When sizing a new component, snap to the nearest token; if no existing token fits, audit whether the size is really necessary before adding a new one. */ --space-0: 0; --space-2: 2px; /* hairline / divider — borders, focus rings, tight inset wrappers (.seg track offset, etc.) */ --space-4: 4px; /* half-step — micro gaps only */ --space-8: 8px; /* 1× — base unit, tight gaps */ --space-12: 12px; /* 1.5× — tight comfortable gap */ --space-16: 16px; /* 2× — comfortable gaps */ --space-20: 20px; /* 2.5× — card inner gutter */ --space-24: 24px; /* 3× — default component padding */ --space-28: 28px; /* 3.5× — fills 24↔32 (icon-only xs+) */ --space-32: 32px; /* 4× — card / panel chrome */ --space-36: 36px; /* 4.5× — fills 32↔40 (icon-only sm) */ --space-40: 40px; /* 5× — generous chrome */ --space-44: 44px; /* 5.5× — fills 40↔48 (touch target) */ --space-48: 48px; /* 6× — hero form card */ --space-52: 52px; /* 6.5× — fills 48↔56 (icon-only lg) */ --space-56: 56px; /* 7× — reserved */ --space-64: 64px; /* 8× — section gutter (tight) */ --space-72: 72px; /* 9× — fills 64↔80 (token row / dense list-item--lg) */ --space-80: 80px; /* 10× — section (default) */ --space-96: 96px; /* 12× — section (loose) */ --space-120: 120px; /* 15× — hero section */ --space-160: 160px; /* 20× — giant hero */ /* ────────────────────────────────────────── Surface widths — `--w-*` (17-tier ordinal ladder, +32px step) ────────────────────────────────────────── Standard widths for floating containers (popovers, menus, panels, modals, command palette, side rails, drawers, sheets). Ordinal numeric naming — `--w-N+1` is always the next step up. Pixel value can be derived as `192 + N × 32` (so `--w-1` = 224, `--w-12` = 576), but the step is the contract; the value is implementation detail. The same way `--space-12` reads as "12px of space", `--w-7` reads as "tier 7 of the surface ladder". Names are deliberately abstract — they don't bake-in a surface type — so future components (popovers, drawers, pickers, sheets) can claim a tier without forking the convention. Pick the nearest tier; "step up" = N+1, "step down" = N-1, no skips, no exceptions. If a real surface needs a width outside the ladder, inline the `max-width` on the element with a comment — don't fork the ladder. */ --w-1: 224px; /* tightest tooltip / pill popover */ --w-2: 256px; /* compact info popover, mini-menu */ --w-3: 288px; /* dropdown menus, single-column pickers, FAB sub-panel */ --w-4: 320px; /* narrow popover, empty-state text cap */ --w-5: 352px; /* (reserved tier — claim for a new surface type) */ --w-6: 384px; /* small modal (confirm) · compact rail · swap rail */ --w-7: 416px; /* widget canvas, content panel, side rail, swap canvas */ --w-8: 448px; /* (reserved tier — claim for a new surface type) */ --w-9: 480px; /* default modal — settings, forms */ --w-10: 512px; /* command palette overlay, wide popover, mid-density modal */ --w-11: 544px; /* (reserved tier — claim for a new surface type) */ --w-12: 576px; /* large modal · workshop drawer · side sheet */ --w-13: 608px; /* (reserved tier — claim for a new surface type) */ --w-14: 640px; /* (reserved tier — claim for a wide panel) */ --w-15: 672px; /* (reserved tier — claim for a wide panel) */ --w-16: 704px; /* Advanced-tier Limit receive panel (chart + 7-col Orders) */ --w-17: 736px; /* (reserved tier — claim for a wide panel) */ /* ────────────────────────────────────────── Type Scale — grounded in the spacing grid ────────────────────────────────────────── Every font-size and line-height lands on a --space-* token when rendered at the default 16px root (1rem = 16px). Authored in rem/em so user zoom + OS text-size scaling stay intact, but the rendered pixel grid is anchored to the same 8px+4px ladder the rest of the system uses. Size rem → px → spacing step: 5rem = 80px → --space-80 3.5rem = 56px → --space-56 3rem = 48px → --space-48 2rem = 32px → --space-32 1.5rem = 24px → --space-24 1rem = 16px → --space-16 0.75rem = 12px → 3× --space-4 (half-step) 0.5rem = 8px → --space-8 ────────────────────────────────────────── */ /* Font sizes — authored in rem; every value resolves to a --space-* token at the default 16px root. Everything sits on the 8px main grid EXCEPT --text-sm and --text-caption, which land on the 4px half-grid. --text-sm is the single documented exception for dense UI (buttons, inputs, table cells, mono labels). */ /* Mega display scale — for presentation decks, poster-scale website statements, single-word monuments, and word-by-word animated reveals. NEVER use on paragraphs, lists, or any multi-line editorial copy. Line-heights are tight (0.94–0.96 ratio) so the cap-height hugs the next line — the large- headline rule applied one step further. Pair with the matching `--lh-*` below; the fluid utility clamps size to the viewport so these never overflow on small screens. */ --text-colossal: 16rem; /* 256px — single-word monument */ --text-keynote: 12rem; /* 192px — deck headline (16:9) */ --text-statement: 9rem; /* 144px — bold website statement */ --text-poster: 7rem; /* 112px — sub-hero / dense slide */ --text-hero: 5rem; /* 80px → --space-80 */ --text-display: 3.5rem; /* 56px → --space-56 */ --text-h1: 3rem; /* 48px → --space-48 */ --text-h2-lg: 2.25rem; /* 36px → 9× --space-4 (half-grid) — value-display tier; fills the 32↔48 gap for large numeric values (amount-card, limit-price-card, chart price) */ --text-h2: 2rem; /* 32px → --space-32 */ --text-h3: 1.5rem; /* 24px → --space-24 */ --text-body-xl: 1.25rem; /* 20px → --space-20 (oversized lede — page-level subtitles, hero intros) */ --text-body-lg: 1.125rem; /* 18px → 4.5× --space-4 (half-grid) — large body, fills the 16↔20 gap; xl button labels, intro paragraphs */ --text-body: 1rem; /* 16px → --space-16 */ --text-sm: 0.875rem; /* 14px → 3.5× --space-4 (half-grid) */ --text-caption: 0.75rem; /* 12px → 3× --space-4 (half-grid) */ --text-micro: 0.625rem; /* 10px → 2.5× --space-4 (half-grid) — slider ticks, badge superscripts, dense overlay glyphs */ /* Line-heights — authored in rem so the baseline lands on a spacing step. Ratios shrink as size grows (large-headline rule). */ --lh-colossal: 15rem; /* 240px → --space-240 (ratio ~0.9375) */ --lh-keynote: 11.25rem; /* 180px → --space-180 (ratio ~0.9375) */ --lh-statement: 8.5rem; /* 136px → --space-136 (ratio ~0.944) */ --lh-poster: 6.75rem; /* 108px → --space-108 (ratio ~0.964) */ --lh-hero: 5rem; /* 80px → --space-80 (ratio 1.0) */ --lh-display: 4rem; /* 64px → --space-64 (ratio ~1.143) */ --lh-h1: 3.5rem; /* 56px → --space-56 (ratio ~1.167) */ --lh-h2: 2.5rem; /* 40px → --space-40 (ratio 1.25) */ --lh-h3: 2rem; /* 32px → --space-32 (ratio 1.333) */ --lh-body-xl: 2rem; /* 32px → --space-32 (ratio 1.6 — oversized lede) */ --lh-body-lg: 1.75rem; /* 28px → --space-28 (ratio ~1.56 — large body, intro paragraphs) */ --lh-body: 1.5rem; /* 24px → --space-24 (ratio 1.5) */ --lh-sm: 1.25rem; /* 20px → 5× --space-4 (ratio ~1.43) */ --lh-caption: 1rem; /* 16px → --space-16 (ratio ~1.333) */ /* Tracking (em) — scales with font-size. */ --tracking-crunch: -0.05em; /* colossal / keynote statements */ --tracking-tighter: -0.04em; /* hero, statement, metric numbers */ --tracking-tight: -0.03em; /* display, h1, h2 */ --tracking-firm: -0.02em; /* value-display tier — paired with --text-h2-lg; between snug and tight */ --tracking-snug: -0.015em; /* h3 */ --tracking-normal: 0; /* body copy */ --tracking-loose: 0.06em; /* small uppercase labels */ --tracking-wide: 0.1em; /* caption uppercase */ --tracking-wider: 0.14em; /* eyebrow uppercase */ /* Font weights — named tokens so weight becomes a controllable axis like size, line-height, and tracking. The CSS spec defines 100–900; the ladder covers the seven weights the codebase actually uses. Pair with `--text-*` sizes; never write literal weight values in new code (see CLAUDE.md "Typography tokens"). 300 — light display, oversized hero numbers (rare; soft-spoken) 400 — body, prose, captions, footers 500 — emphasised body, ghost / placeholder display type 600 — headings, button labels, chip labels, eyebrows 700 — display, hero, statement, primary metric numbers 800 — heavy display, page headers, marketing impact type 900 — extreme display, single-keyword statements (very rare) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* ── Semantic — component chrome ────────────────────────── Inner padding of interactive panels. Tiered by surface density: sm for dense lists, md default, lg for form cards, xl for hero panels. */ --pad-chrome-sm: var(--space-16); --pad-chrome-md: var(--space-24); --pad-chrome-lg: var(--space-32); --pad-chrome-xl: var(--space-48); /* ── Semantic — section rhythm ──────────────────────────── Page-level vertical gutters. Horizontal gutter is the safe-area inset for container contents. */ --pad-section-y-sm: var(--space-64); --pad-section-y: var(--space-96); --pad-section-y-lg: var(--space-120); --pad-section-x: var(--space-48); /* ── Semantic — form rhythm ─────────────────────────────── Used by .form-group, .form-row, .form-card. */ --gap-form-field: var(--space-24); --gap-form-row: var(--space-16); --gap-form-inline: var(--space-8); /* ── Semantic — stack (vertical flow) ───────────────────── For gaps in vertical flex columns, list spacing, successive block margins. */ --stack-xs: var(--space-8); --stack-sm: var(--space-16); --stack-md: var(--space-24); --stack-lg: var(--space-32); --stack-xl: var(--space-48); --stack-2xl: var(--space-64); /* ── Semantic — cluster (horizontal flow) ───────────────── For gaps in horizontal flex rows, inline element groups, icon + label pairs. */ --cluster-xs: var(--space-4); --cluster-sm: var(--space-8); --cluster-md: var(--space-16); --cluster-lg: var(--space-24); /* ── Semantic — card gap (card-to-card spacing) ─────────── 5-tier ladder for the gap between card-shaped siblings in a list or grid. Distinct from --stack-* (vertical content rhythm) and --cluster-* (inline element gaps). Token names describe POSITION on the ladder (xs/sm/md/lg/xl), NOT the use case — the use case is documentation, the tokens are the ladder. This decoupling is what makes the mapping swappable: a future "card gap composer" can override the five tier tokens at :root to install a Compact or Spacious preset, and every consumer updates via cascade — same mechanism the Theme Composer uses to swap brand colours. Consumption pattern — every card-list component publishes a local `--card-gap` CSS custom property that defaults to one of these tokens, then reads `gap: var(--card-gap)`. This gives a component-level default plus a per-instance escape hatch (override `--card-gap` inline or via context selector without touching component CSS). Authoring rule — consumers reach for the named tier (`var(--gap-card-md)`), never the raw `--space-*` underneath. Reaching past the tier to the raw value defeats the swappability. May 2026. */ --gap-card-xs: var(--space-4); /* coupled pair — FAB at seam, joint surfaces */ --gap-card-sm: var(--space-8); /* compact list — rail cards, dense menus */ --gap-card-md: var(--space-12); /* default — quote cards, vertical card stacks */ --gap-card-lg: var(--space-16); /* comfortable grid — multi-col, breathing room */ --gap-card-xl: var(--space-24); /* spacious grid — hero-tier, marketing */ /* Convenience alias — `--gap-card` (no modifier) resolves to md. Use `var(--gap-card-md)` in component CSS for explicitness; use `var(--gap-card)` for inline overrides where brevity helps. */ --gap-card: var(--gap-card-md); /* ────────────────────────────────────────── Canvas grid spacing — two-axis, composer-driven (sibling of the radius tokens above) ────────────────────────────────────────── The horizontal + vertical gaps of a content CANVAS (the Portal dashboard grid, the Playground widget stage). Two axes because the two rhythms differ by design: tight gutters BETWEEN side-by-side cards (x) vs. roomier breathing BETWEEN stacked sections (y). --grid-gap-x → grid column-gap (cards/panels in a row) --grid-gap-y → section-stack gap + grid row-gap (wrapped rows) Mode-independent (like --card-radius — no [data-theme] variant). Editable per-theme from the Theme Composer's "Spacing" section (theme-editor.js features.gaps), painted to the active canvas via window.lifiApplyGapsToScope. Consumed today by .portal-* canvas grids + .widget-stage; .playground-canvas overrides --grid-gap-x to 24 (its historical gutter) — see swap.css. Full contract: CLAUDE.md → "Canvas grid-spacing system". */ --grid-gap-x: var(--space-16); --grid-gap-y: var(--space-24); /* ────────────────────────────────────────── Card radius — single source of truth ────────────────────────────────────────── One variable wires every card-like surface (.card, .ui-*-card, .theme-card, .alert, .notification, .setting-row, modals, popovers …) to a single radius token. Default 16 px (canonical UI card recipe). Override at :root via `--card-radius` to flip every consumer in one motion — wired to the playground rail's "Card radius" customization drill (initRailCardRadius in swap.js). When authoring a new card-shaped primitive, consume var(--card-radius) instead of hand-picking from --space-*. Off-ladder radii (avatars at 50%, pills at --r-full, hairlines at 1-2px) keep their literal values — those aren't cards. */ --card-radius: var(--space-16); /* ────────────────────────────────────────── Panel radius — sibling token for container surfaces ────────────────────────────────────────── Independent slider from --card-radius. Panels are the "frames" (.panel — form panel, receive panel, playground rail) that HOLD cards. Decoupling lets a designer flip pillowy panels around sharp cards (or vice versa) without one ladder dragging the other. Default 16 px to match the canonical recipe; wired to the rail's "Panel radius" drill (initRailPanelRadius in swap.js). */ --panel-radius: var(--space-16); /* ────────────────────────────────────────── Panel padding — single source of truth for .panel internal padding ────────────────────────────────────────── Consumed by .panel below. Default --space-24 matches the historic hand-picked value. Per-instance overrides via the local custom property pattern: a consumer can set padding-block / padding-inline directly, or redefine --panel-padding in its scoped rule. Why the token exists: some panel contexts host content whose hover or active states need to render PAST the row's edge (e.g., the token picker's .list-item--interactive::before bleed). Reducing the panel's side padding makes room for that bleed without affecting the avatar/trail position (when paired with a compensating body padding inside the panel — see swap.css "Picker panel side-padding compensation" block). */ --panel-padding: var(--space-24); /* Panel gap — internal flex-column gap between a panel's slots/children. Was a hardcoded --space-12 literal inside .panel; promoted to a token so a roomier consumer (e.g. .ui-card at 16) tunes via override, not new CSS. Default --space-12 reproduces the prior .panel literal exactly. */ --panel-gap: var(--space-12); /* Panel surface (elevation axis) — the three tokens .panel CONSUMES for its fill + cast shadow + border. Defined on :root (NOT on .panel) so any ancestor scope — a content canvas — can flip them by inheritance, and the .panel--flat / .panel--elevated modifiers can override per-instance. Defaults = the elevated look: raised-FRAME fill + --elev-3 + no border. Flat flips to the CONTENT tier (--surface-card — white-capable in light, tracks the surface seed) + no shadow + hairline, because a flat panel is a content surface sitting on the canvas, not a raised frame. June 2026 — see CLAUDE.md → "Panel primitive". */ --panel-surface: var(--surface-raised); --panel-shadow: var(--elev-3); --panel-border: transparent; /* ────────────────────────────────────────── List hover bleed — magnitude of the row hover/active/selected pseudo that extends past each list row's L/R edges ────────────────────────────────────────── Single source of truth for "how far past the row does the hover surface extend." Consumed by four sites in lockstep (search `var(--list-hover-bleed)`): • .ui-token-list .list-item--interactive::before — pseudo inset • .ui-token-picker__head / __body — compensating L/R padding so the avatar/trail stay at the panel content edge • Picker panel side-padding override — reduces panel inline padding by exactly this magnitude to make room for the bleed Bumping this token shifts every consumer in one edit. Default --space-16 matches the canonical token picker layout (panel padding 24 - bleed 16 = 8 side inset; body padding 16 brings the avatar back to panel-outer + 24). */ --list-hover-bleed: var(--space-16); /* ────────────────────────────────────────── Button radius — third sibling token for text buttons ────────────────────────────────────────── Anchors the stepped text-button radius ladder (re-introduced May 2026, reversing the brief "uniform 16" era): the token IS the lg tier, and the other text tiers derive via calc — sm = token−8 (8), md/default = token−4 (12), lg = token (16), xl = token+4 (20). Every .btn-icon tier (xs / sm / default / lg) consumes the bare token (uniform) so the square chrome buttons round in lockstep with the lg text button. Under the rail's "Button radius" customization, sliding the token scales the whole ladder while preserving the +4 steps. Default 16 px matches the canonical (lg-anchor) button shape. .btn-circle stays exempt (full radius pill — an explicit shape primitive). Wired to the rail's "Button radius" drill (initRailButtonRadius in swap.js). */ --button-radius: var(--space-16); /* ────────────────────────────────────────── Nested radius — concentric corners (a calc, not a token) ────────────────────────────────────────── When a rounded child sits inside a rounded, PADDED parent, the two corner curves only stay parallel — concentric, a constant gap all the way around the bend — when: outer radius = inner radius + padding inner radius = outer radius − padding (the same equation) There is no --nest-radius token, because the value depends on two per-context inputs (the parent's radius + the gap to it). Express it inline with calc(). Each direction carries a clamp: • INWARD (deriving the child) — floor at 0 so a deeply-inset child goes square rather than negative (--space-N is the parent's pad): .child { border-radius: max(var(--card-radius) - var(--space-N), 0px); } • OUTWARD (deriving the frame/encompassing card) — ceiling at --space-32 so a large padding doesn't over-round the outer card (--space-N is the child's pad): .parent { border-radius: min(calc(var(--inner-radius) + var(--space-N)), var(--space-32)); } The two clamps are twins: inward floors at 0 (square), outward caps at 32 (calm). Concentric BETWEEN the clamps; flat past them. When padding ≥ the parent's radius the child's corners are sharp (0): the parent's straight edges have already started before the child's corner, so any rounding reads as crowded, not concentric. Mirror case outward: once seed + padding exceeds 32, the outer card stops tracking the child and reads as a calm rounded card instead of an over-bubbled one. .destination-card is the reference consumer. Scope: card/panel/button radius all default to a flat 16 (by design — see the Radius system note above). This calc is for DERIVING a nested element's radius when you want the curves to track; it is NOT auto-applied to existing nested cards. Full spec: design-system/index.html#nested-radius + CLAUDE.md → "Nested radius — concentric corners". */ /* ────────────────────────────────────────── Gradients ────────────────────────────────────────── ALL brand gradients derive from the active --lifi-* tokens so first paint matches the active palette (LI.FI 1.0 by default — see the "LI.FI 1.0 is the only default" rule in CLAUDE.md). Earlier versions baked LI.FI 2.0 OKLCH values directly into these defaults, then relied on the Theme Composer's runtime override (shared.js → buildTokens) to swap them. That created a visible FOUC on every page load — hero painted 2.0 → JS ran → tokens rewritten → hero re-painted 1.0. By driving the defaults off the same --lifi-sapphire/pink/ink tokens that the composer mutates, both first paint AND runtime updates look right with no flash. The composer still overrides these tokens at runtime when applying non-default palettes — see shared.js:1153 for the override list. */ --grad-brand: linear-gradient(135deg, var(--lifi-sapphire) 0%, var(--lifi-pink) 100%); --grad-brand-text: linear-gradient(135deg, var(--lifi-sapphire) 0%, color-mix(in oklch, var(--lifi-sapphire), var(--lifi-pink)) 50%, var(--lifi-pink) 100%); --grad-brand-rich: linear-gradient(135deg, var(--lifi-sapphire) 0%, color-mix(in oklch, var(--lifi-sapphire) 75%, var(--lifi-pink)) 25%, color-mix(in oklch, var(--lifi-sapphire) 50%, var(--lifi-pink)) 50%, var(--lifi-pink) 100%); --grad-card-top: linear-gradient(180deg, color-mix(in oklch, var(--lifi-sapphire) 22%, transparent) 0%, transparent 100%); /* Spectral radial — built from the 12-tone --spectral-* palette (not the brand pair). Aurora character: rose center fans through magenta and indigo to cyan at the edge, travelling roughly a half-turn of the hue wheel for a soft "northern lights" feel. Use as a plate behind transparent portraits when the surface itself should be the moment (hero photos, "select your archetype" tiles, marketing standout). Paired modifier: .avatar--plate-spectral-radial. */ --grad-spectral-radial: radial-gradient(circle at 50% 35%, var(--spectral-12) 0%, var(--spectral-11) 33%, var(--spectral-9) 66%, var(--spectral-7) 100%); } /* ────────────────────────────────────────────────────────────── RESPONSIVE SEMANTIC SPACING REMAPS ────────────────────────────────────────────────────────────── Desktop values live in :root above. Here we step the named tokens down one rung on tablet, and again on phone. The raw --space-* scale is invariant; only *intent* tokens shift. Every consumer of --pad-chrome-lg, --pad-section-y, etc. adapts automatically — no per-component media queries needed. ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { :root { /* Chrome: tablet tightens one rung */ --pad-chrome-xl: var(--space-40); /* 48 → 40 */ --pad-chrome-lg: var(--space-24); /* 32 → 24 */ --pad-chrome-md: var(--space-16); /* 24 → 16 */ /* Section rhythm */ --pad-section-y-lg: var(--space-96); /* 120 → 96 */ --pad-section-y: var(--space-80); /* 96 → 80 */ --pad-section-x: var(--space-32); /* 48 → 32 */ /* Vertical stack */ --stack-2xl: var(--space-48); /* 64 → 48 */ --stack-xl: var(--space-32); /* 48 → 32 */ --stack-lg: var(--space-24); /* 32 → 24 */ } } @media (max-width: 600px) { :root { /* Chrome: phone is tightest */ --pad-chrome-xl: var(--space-32); /* 48 → 32 */ --pad-chrome-lg: var(--space-16); /* 32 → 16 */ --pad-chrome-md: var(--space-16); /* 24 → 16 */ --pad-chrome-sm: var(--space-8); /* 16 → 8 */ /* Section rhythm */ --pad-section-y-lg: var(--space-80); /* 120 → 80 */ --pad-section-y: var(--space-64); /* 96 → 64 */ --pad-section-y-sm: var(--space-48); /* 64 → 48 */ --pad-section-x: var(--space-24); /* 48 → 24 */ /* Form gaps tighten */ --gap-form-field: var(--space-16); /* 24 → 16 */ /* Stack tightens one more rung */ --stack-2xl: var(--space-40); /* 64 → 40 */ --stack-xl: var(--space-24); /* 48 → 24 */ --stack-lg: var(--space-16); /* 32 → 16 */ --stack-md: var(--space-16); /* 24 → 16 */ } } /* ────────────────────────────────────────────────────────────── LIGHT MODE TOKEN OVERRIDES ────────────────────────────────────────────────────────────── Technique: mirror the dark lightness delta across the 50% axis. Dark bg L=8.5% → Light bg L=97% (8.5 + 97 ≈ 105.5, midpoint ≈ 52.75) Dark text L=98% → Light text L=14% (98 + 14 = 112, midpoint ≈ 56) This gives perceptually balanced contrast in both modes. ────────────────────────────────────────────────────────────── */ [data-theme="light"] { /* Surfaces — Paper page model (LI.FI 1.0; neutralHue 277, surfaceL 99). The page is Paper #FAFBFF (L99, cool hue 277) — NOT pure white; the fixed-white --surface-card tier (#FFFFFF, L100) lifts ABOVE it, so white cards separate from the page via a 1% tonal step + shadow. June 2026: Paper was lightened L98→L99 (#F7F8FD → #FAFBFF, designer call) — the page↔card step tightened 2%→1%, so the card now lifts on shadow + the 1% step (verified cards still read). The whole light ladder shifts up 1 (page surf, raised/sunk surf-3) except the fixed-white card. Mirrors the lifi-1 light surface seed { l:99, c:0.007, h:277 } (CSS can't read JS — keep the pair in lockstep). */ --surface-page: oklch(99% 0.007 277); /* light page bg — Paper #FAFBFF (cool pale-blue) */ --surface-raised: oklch(96% 0.0076 277); /* light surface — below paper page (surf-3) */ --surface-sunk: oklch(96% 0.007 277); /* light recessed canvas — recess below Paper page (surf-3); level with --surface-raised (elevated panels separate via shadow), below the fixed-white --surface-card content tier the flat panels use */ /* ── Elevation shadow tokens — LIGHT MODE ────────────────── Light-mode shadows are classic Material-style soft drops — no inset highlight needed (light surfaces show shadow well). Tier semantics match the dark-mode tokens; consumers don't branch on theme, they just reach for --elev-N. */ --elev-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04); --elev-2: 0 4px 14px -2px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.05); --elev-3: 0 24px 56px -8px rgba(0,0,0,0.16), 0 8px 16px -4px rgba(0,0,0,0.08); /* Filter-form of the elevation tokens — for MASKED elements ONLY. box-shadow is the canonical elevation method (see :root above + CLAUDE.md → "mask-image clips box-shadow"); this form exists only because mask-image clips box-shadow, so a masked surface must paint its lift via filter. Each token is VALUE-MATCHED to its --elev-N twin: --elev-1-filter mirrors --elev-1's two outset layers as a chained drop-shadow, so the lone masked surface (.ui-amount-pair) renders the same shadow as its box-shadow neighbours (e.g. .ui-destination-wallet-card right below it). Chained- compounding is negligible at these 1–2 px blurs; the smearing risk only bites at large radii. The inset rim-highlight layer has no drop-shadow equivalent and is dropped (light mode has no rim anyway). */ --elev-1-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06)) drop-shadow(0 1px 1px rgba(0,0,0,0.04)); --elev-2-filter: drop-shadow(0 4px 14px rgba(0,0,0,0.10)) drop-shadow(0 2px 4px rgba(0,0,0,0.05)); --elev-3-filter: drop-shadow(0 24px 56px rgba(0,0,0,0.16)) drop-shadow(0 8px 16px rgba(0,0,0,0.08)); /* Glass panel base — one elevation LIGHTER than surface-page. In light mode surface-page is already near-white, so we push to pure white for a visible lift. Kept in sync with the dark-mode intent (see :root). */ --glass-base: color-mix(in oklch, var(--surface-page), white 70%); /* Light-mode override for the shared glass-panel shadow. --surface- panel-glass and --backdrop-panel-glass are unchanged (auto-flip via --glass-base). Light shadows are softer + less neutral-black so the panel doesn't read as dim against a near-white page. The 4th layer — a 1px accent ring — is light-mode-only; it gives the panel a crisp brand-tinted edge on near-white surfaces where neutral shadows alone wash out. Dark mode skips it (the inset highlight plus alpha contrast already define the edge there). */ --shadow-panel-glass: inset 0 1px 0 rgba(255,255,255,0.7), 0 12px 40px -12px color-mix(in oklch, #000 20%, transparent), 0 2px 8px -4px color-mix(in oklch, var(--accent-primary) 7%, transparent), 0 0 0 1px color-mix(in oklch, var(--accent-primary) 6%, transparent); /* Materials — light-mode card tier. FIXED near-WHITE (June 2026 paper-and-card model): cards sit at true white ABOVE the light paper page — the symmetric counterpart of the dark side's fixed 28% tier. Replaces the May 2026 `var(--surface-page)` pivot. With the Paper page (#FAFBFF, L99 — LI.FI 1.0, the default) the white card (L100) lifts ABOVE the page via a 1% tonal step + shadow; white (100) is ≥ every light page, so a card can never recess. The Theme Composer mirrors this rule: deriveTokens writes `oklchStr(100, sc * 0.3, nh)` in light mode — for LI.FI 1.0 the surface chroma is a whisper (0.002), so the card is effectively pure white below. Shadows / borders / backdrop / glass-fill all flow through the upstream theme-flip without an override (--elev-*, --text-primary, --shadow-panel-glass, --glass-base already auto-flip). Spec: design.md §02 → Materials → Light-mode overrides. */ --surface-card: oklch(100% 0.0021 277); /* Deprecated aliases */ --navy: var(--surface-page); --deep-blue: var(--surface-raised); /* Navbar surfaces flip to light-on-light */ --nav-panel-bg: oklch(97% 0 268 / 0.95); --nav-mobile-bg: oklch(97% 0 268 / 0.97); /* Text — neutral black ALPHA ladder (LI.FI 1.0 default; no `text` record on the default preset — TC5 mirror, see the dark block). */ --text-primary: oklch(10% 0.0078 274); /* primary text — near-black ink on paper (text-tint axis) */ --text-secondary: oklch(49% 0.026 274); /* secondary — Slate #5C6070 */ --text-muted: oklch(62% 0.026 274); /* muted */ --text-faint: oklch(70% 0.0234 274); /* faint/decorative */ /* Icon family — light-mode override slot. Today it consumes the text tokens, so icons match label weight on white surfaces. Override here when chrome icons should diverge from text in light mode (e.g., a slightly warmer black for icons on white). */ --icon-primary: var(--text-primary); --icon-muted: var(--text-muted); /* Deprecated aliases */ --white: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted); --text-4: var(--text-faint); --gray: var(--text-muted); /* Light-mode spectral aliases (Apr 2026 v3) Re-point the theme-aware --spectral-N alias at the *-light primitives defined in :root. Same architecture used for accents, text, surfaces. See the dashboard-discipline comment in :root above for the why. */ --spectral-1: var(--spectral-1-light); --spectral-2: var(--spectral-2-light); --spectral-3: var(--spectral-3-light); --spectral-4: var(--spectral-4-light); --spectral-5: var(--spectral-5-light); --spectral-6: var(--spectral-6-light); --spectral-7: var(--spectral-7-light); --spectral-8: var(--spectral-8-light); --spectral-9: var(--spectral-9-light); --spectral-10: var(--spectral-10-light); --spectral-11: var(--spectral-11-light); --spectral-12: var(--spectral-12-light); /* Sequential aliases — light mode points at *-light primitives. */ --seq-1: var(--seq-1-light); --seq-2: var(--seq-2-light); --seq-3: var(--seq-3-light); --seq-4: var(--seq-4-light); --seq-5: var(--seq-5-light); --seq-6: var(--seq-6-light); --seq-7: var(--seq-7-light); --seq-8: var(--seq-8-light); --seq-9: var(--seq-9-light); /* Diverging aliases — light mode points at *-light primitives. Note --div-5 (neutral) is identical across modes by design. */ --div-1: var(--div-1-light); --div-2: var(--div-2-light); --div-3: var(--div-3-light); --div-4: var(--div-4-light); --div-5: var(--div-5-light); --div-6: var(--div-6-light); --div-7: var(--div-7-light); --div-8: var(--div-8-light); --div-9: var(--div-9-light); /* Light-mode accent overrides (LI.FI 1.0) Hue parity rule: light + dark MUST share the same hue value for each accent. Only lightness (and optionally chroma) differs across modes — that's how the same brand color reads as the "same color" in both themes. Drift here is the bug class that broke --accent-tertiary in light mode (hue 268 instead of 290 silently made tertiary indistinguishable from primary). */ --lifi-sapphire: oklch(52% 0.18 269); /* primary — Sapphire #405CCF (native; AA on paper 6.1:1) */ --lifi-sapphire-mid: oklch(62% 0.1584 269); /* primary mid — hover states */ --lifi-sapphire-light: oklch(50% 0.054 269); /* primary light — tinted bg */ --lifi-pink: oklch(88% 0.1 322); /* secondary — Pink #F7C2FF (matches dark) */ --lifi-ink: oklch(24% 0.066 276); /* tertiary — Ink, deep band on paper (matches dark hue) */ --lifi-dark: oklch(9.5% 0.007 277); /* foundation — light derivation */ --brand-pink: var(--lifi-ink); /* deprecated alias */ /* Jumper sibling-brand primitives — light pair (see :root block) */ --jumper-indigo: oklch(30% 0.170 288); /* renders #31007A — Indigo Purple */ --jumper-purple: oklch(47% 0.237 312); /* renders #8700B8 — Vivid Purple */ /* ── Semantic state tokens — light mode coefficient overrides ── The four --success / --danger / --warn / --info anchors are formula-derived in :root (see the doctrine block there). Light mode only needs to override the per-role coefficients (semantics shift darker for WCAG contrast on light surfaces) and the surface-tier constants (bg/border lift to high-L, low-C tints). Tuned via the Semantic Composer (May 2026 export) when anchor = oklch(44% 0.230 268): success: L=0.44+0.095=0.535, C=0.230*1.000=0.230, H=165 danger: L=0.44+0.140=0.580, C=0.230*1.000=0.230, H= 24 warn: L=0.44+0.280=0.720, C=0.230*1.300=0.299, H= 98 info: L=0.44+0.190=0.630, C=0.230*0.820=0.189, H=264 H values flow through from :root via the cascade — only L+C overrides live here. */ --sem-success-L-offset: 0.095; --sem-success-C-mult: 1.000; --sem-danger-L-offset: 0.140; --sem-danger-C-mult: 1.000; --sem-warn-L-offset: 0.280; --sem-warn-C-mult: 1.300; --sem-info-L-offset: 0.190; --sem-info-C-mult: 0.820; /* Surface-tier — light mode inverts: high-L pale tints + mid-L borders. */ --sem-bg-L: 0.95; --sem-bg-C: 0.04; --sem-border-L: 0.80; --sem-border-C: 0.12; /* Spectrum Palette — light mode resolves via the --spectral-N → *-light alias block above (Apr 2026 v3 dashboard-discipline). The retired v2 "vibrant" literal overrides (higher-chroma, near-gamut-ceiling) lived here and silently shadowed that alias, so the live light palette was v2 while design.md §Spectrum and personas.html were on v3. Removed so the canonical *-light primitives are the single light-mode source — matching the dark side's primitives+alias shape (no literal override). Series palette inherits via the var() chain in :root — no light-mode override needed here, since each --series-N points at a --spectral-N which is re-pointed to its *-light primitive in the alias block above. */ /* Alpha Surface Scale — light mode Recess = black overlay (darken), Elevate = white overlay (lighten). --alpha-raised flips to white because the active surface should "float" above the darker track, matching the dark mode logic. */ --alpha-dim: oklch(0% 0 0 / 0.03); --alpha-subtle: oklch(0% 0 0 / 0.06); --alpha-moderate: oklch(0% 0 0 / 0.09); --alpha-raised: oklch(100% 0 0 / 0.88); /* white — elevates above track */ --alpha-overlay: oklch(100% 0 0 / 0.95); /* brighter hover on raised */ --on-alpha-faint: oklch(0% 0 0 / 0.25); --on-alpha-muted: oklch(0% 0 0 / 0.45); --on-alpha-default: oklch(0% 0 0 / 0.65); --on-alpha-strong: oklch(0% 0 0 / 0.85); --alpha-border-dim: oklch(0% 0 0 / 0.04); --alpha-border-subtle: oklch(0% 0 0 / 0.08); --alpha-border-strong: oklch(0% 0 0 / 0.14); /* Overlays flip: white tint → dark tint */ --overlay-hover: oklch(0% 0.015 268 / 0.05); --overlay-press: oklch(0% 0.015 268 / 0.09); --overlay-brand: color-mix(in oklch, var(--lifi-sapphire) 8%, transparent); /* Borders flip */ --border-subtle: oklch(0% 0.015 268 / 0.08); --border-brand: color-mix(in oklch, var(--lifi-sapphire) 20%, transparent); /* Field Tokens — light mode: black overlays darken / recess. Focus background flips to pure white so the field reads as "opened" rather than merely tinted. */ /* Light mode: the field is the WHITE content surface (lighter than the off-white panels it sits on) — not the old grey-black well. Border is a neutral --text-primary overlay (pure black in light). */ --field-bg: var(--surface-card); --field-bg-hover: var(--surface-card); --field-bg-focus: var(--surface-card); --field-border: color-mix(in oklch, var(--text-primary) 12%, transparent); --field-border-hover: color-mix(in oklch, var(--text-primary) 22%, transparent); --field-border-focus: var(--accent-primary-mid); --field-ring: color-mix(in oklch, var(--accent-primary) 18%, transparent); --field-placeholder: var(--text-faint); color-scheme: light; } /* ────────────────────────────────────────────────────────────── MATERIALS — [data-material] attribute selectors ────────────────────────────────────────────────────────────── Each selector wires one material's definitions onto the resolved --mat-* API. Specificity 0,1,0 — overrides the :root default (paper) and any :where() per-component default. Authoring rule: components read from --mat-*, never from --material-*-*. This block is the ONLY place selectors map the two layers; never duplicate the mapping inside a component rule. Light/dark flips happen at the upstream tokens, not here — there is intentionally NO [data-theme="light"] override for the resolved layer. Spec: design.md §02 → Materials. Catalog: #materials in design-system/index.html. ────────────────────────────────────────────────────────────── */ [data-material="paper"] { --mat-bg: var(--material-paper-bg); --mat-border: var(--material-paper-border); --mat-shadow: var(--material-paper-shadow); --mat-shadow-hover: var(--material-paper-shadow-hover); --mat-backdrop: var(--material-paper-backdrop); --mat-highlight: var(--material-paper-highlight); } [data-material="glass"] { --mat-bg: var(--material-glass-bg); --mat-border: var(--material-glass-border); --mat-shadow: var(--material-glass-shadow); --mat-shadow-hover: var(--material-glass-shadow-hover); --mat-backdrop: var(--material-glass-backdrop); --mat-highlight: var(--material-glass-highlight); } [data-material="gradient"] { --mat-bg: var(--material-gradient-bg); --mat-border: var(--material-gradient-border); --mat-shadow: var(--material-gradient-shadow); --mat-shadow-hover: var(--material-gradient-shadow-hover); --mat-backdrop: var(--material-gradient-backdrop); --mat-highlight: var(--material-gradient-highlight); } [data-material="halo"] { --mat-bg: var(--material-halo-bg); --mat-border: var(--material-halo-border); --mat-shadow: var(--material-halo-shadow); --mat-shadow-hover: var(--material-halo-shadow-hover); --mat-backdrop: var(--material-halo-backdrop); --mat-highlight: var(--material-halo-highlight); } /* ── Per-component material defaults — :where() = specificity 0 so [data-material="…"] on the element overrides cleanly. Two component families have a "default material by class membership": the glass family (floating panels) and the paper family (content cards). Other components (utility primitives, form controls) don't set --mat-* and inherit the :root default (paper) only if their layout consumes those tokens. */ /* Glass-by-class — floating panels reserved for navigation chrome and workspace tools that sit over arbitrary content. The siblings below stay glass because the underlying content is visually load-bearing (the navbar reveals the page behind it; the cmd-palette overlays a working canvas; the FAB menu floats over a busy page). Migration history: - Apr 2026 — .panel switched to an opaque raised surface + --elev-3 and removed from this list. - May 2026 — .playground-rail removed (composes .panel for its surface chrome, so the glass registration was dead weight). - May 2026 — .dropdown__panel moved to the paper registry below. Dropdowns now use a solid card surface; the glass blur read as "weird background blur" inside form rows and dense settings UIs where the panel's anchored to a specific trigger, not floating over the page. Glass remains reserved for navigation surfaces. */ :where(.ds-doc-menu-panel, .cmd-palette__panel) { --mat-bg: var(--material-glass-bg); --mat-border: var(--material-glass-border); --mat-shadow: var(--material-glass-shadow); --mat-shadow-hover: var(--material-glass-shadow-hover); --mat-backdrop: var(--material-glass-backdrop); --mat-highlight: var(--material-glass-highlight); } /* Paper-by-class — UI-tier card primitives, the search-bar form control, and the dropdown menu panel. The :root default is already paper, but this rule is explicit so a card sitting inside a glass- tinted ancestor doesn't inherit glass. Override per-card with data-material on the element itself. */ :where(.stat-card, .card, .action-card, .search, .notification, .content-tile, .dropdown__panel) { --mat-bg: var(--material-paper-bg); --mat-border: var(--material-paper-border); --mat-shadow: var(--material-paper-shadow); --mat-shadow-hover: var(--material-paper-shadow-hover); --mat-backdrop: var(--material-paper-backdrop); --mat-highlight: var(--material-paper-highlight); } /* Glass-by-class — marketing tile primitives. Promoted from frosted to glass when frosted was retired (May 2026); marketing tiles now wear the same translucent + backdrop-blur recipe as floating panels, giving them an "airy lifted" feel that fully-opaque paper can't match. Override per-card with data-material="paper" if a tile specifically needs an opaque surface (e.g. dense data grids where blur cost is undesirable). */ :where(.tile, .feature-card, .enterprise-card) { --mat-bg: var(--material-glass-bg); --mat-border: var(--material-glass-border); --mat-shadow: var(--material-glass-shadow); --mat-shadow-hover: var(--material-glass-shadow-hover); --mat-backdrop: var(--material-glass-backdrop); --mat-highlight: var(--material-glass-highlight); } /* Halo-by-class — brand-identity cards. Source order matters: this rule comes AFTER the glass :where() above so .brand-card (which typically composes .tile.brand-card) wears halo, not glass. --mat-bg is inlined with var(--brand-c) directly instead of routing through --material-halo-bg. Reason: --material-halo-bg's value contains var(--accent-tint), which is substituted at :root scope when --material-halo-bg is computed there, locking it to :root's default --accent-tint (--lifi-ink). Per-element overrides of --accent-tint never propagate back. Inlining the gradient with var(--brand-c) here defers substitution to the consuming element where --brand-c resolves to the card's brand colour. */ :where(.brand-card) { --mat-bg: radial-gradient(ellipse 85% 65% at 100% 0%, color-mix(in oklch, var(--brand-c) 12%, transparent) 0%, transparent 70%), color-mix(in oklch, var(--brand-c) 3%, var(--surface-card)); --mat-border: var(--material-halo-border); --mat-shadow: var(--material-halo-shadow); --mat-shadow-hover: var(--material-halo-shadow-hover); --mat-backdrop: var(--material-halo-backdrop); --mat-highlight: var(--material-halo-highlight); } html { scroll-behavior: smooth; font-family: var(--font-sans); background: var(--surface-page); } body { background: transparent; color: var(--text-primary); overflow-x: hidden; isolation: isolate; } a { text-decoration: none; color: inherit; } /* ══════════════════════════════════════════ PAGE AMBIENT BACKGROUND — default on every page ══════════════════════════════════════════ Two fixed pseudo-element layers behind all page content: ::before — top-left primary + top-right secondary (always on) ::after — bottom-right primary + bottom-left secondary, mirrored from the top pair. Fades out on scroll so the bottom glows only show while the hero is in view. Both layers derive from the active palette via --accent-primary / --accent-secondary, so they follow every theme and preset automatically. Intensity is tuned per theme — heavier in dark, dialed back in light. A slow, very subtle drift animation keeps the layers feeling alive without drawing attention; disabled for prefers-reduced-motion users. The bottom-layer opacity is driven by --page-bg-bottom-opacity, set by initPageAmbientBackground() in shared.js (rAF-throttled; fades from 1 → 0 across the first viewport height of scroll). ══════════════════════════════════════════ */ body::before, body::after { content: none; /* TEMP — page ambient glow paused; restore with content: '' */ position: fixed; /* -6% inset gives a 112vw × 112vh box so drift translates up to ±3% never expose the viewport edge. Gradient positions are still interpreted relative to this (slightly larger) element box. */ inset: -6%; pointer-events: none; z-index: -1; will-change: transform; } body::before { background: radial-gradient(ellipse 80% 55% at 30% -10%, color-mix(in oklch, var(--accent-primary) 26%, transparent) 0%, transparent 55%), radial-gradient(ellipse 45% 65% at 100% 25%, color-mix(in oklch, var(--accent-secondary) 20%, transparent) 0%, transparent 55%); animation: page-ambient-drift-a 22s ease-in-out infinite; } body::after { background: radial-gradient(ellipse 80% 55% at 70% 110%, color-mix(in oklch, var(--accent-primary) 26%, transparent) 0%, transparent 55%), radial-gradient(ellipse 45% 65% at 0% 75%, color-mix(in oklch, var(--accent-secondary) 20%, transparent) 0%, transparent 55%); opacity: var(--page-bg-bottom-opacity, 1); transition: opacity 0.3s ease-out; animation: page-ambient-drift-b 28s ease-in-out infinite; } [data-theme="light"] body::before { background: radial-gradient(ellipse 80% 55% at 30% -10%, color-mix(in oklch, var(--accent-primary) 15%, transparent) 0%, transparent 55%), radial-gradient(ellipse 45% 65% at 100% 25%, color-mix(in oklch, var(--accent-secondary) 12%, transparent) 0%, transparent 55%); } [data-theme="light"] body::after { background: radial-gradient(ellipse 80% 55% at 70% 110%, color-mix(in oklch, var(--accent-primary) 15%, transparent) 0%, transparent 55%), radial-gradient(ellipse 45% 65% at 0% 75%, color-mix(in oklch, var(--accent-secondary) 12%, transparent) 0%, transparent 55%); } /* Drift — small translate, fast enough to read as gentle motion without distracting. The two pseudos use different periods so they drift out of phase and never line up. */ @keyframes page-ambient-drift-a { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(-3%, 1.8%, 0); } 66% { transform: translate3d(2.2%, -1.4%, 0); } } @keyframes page-ambient-drift-b { 0%, 100% { transform: translate3d(0, 0, 0); } 40% { transform: translate3d(2.6%, -2%, 0); } 70% { transform: translate3d(-1.8%, 1.6%, 0); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; transition: none; } } /* ══════════════════════════════════════════ 3. NAVBAR & MEGA DROPDOWN The whole navigation — logo, links, buttons — is wrapped inside a single floating pill spanning the viewport with a 20 px gutter. The glass surface is rendered on ONE pseudo-element (#navbar::before) that expands downward when a dropdown opens. The dropdown panel itself carries no background — it's just content laid on top of the extended pseudo. That keeps a single backdrop-filter pass across both the nav row and the submenu area (two separate backdrop-filter surfaces composite slightly differently at the seam, which reads as a visible secondary gradient — not what we want). ══════════════════════════════════════════ */ /* Navbar family — `.navbar-`. Shared chrome (pill shape, sticky position, glass-on-scroll, dropdown expansion) lives on a combined selector; only `.nav-*` children differ + a few surface-specific extras (the logo slot diverges: `.navbar-site__logo` vs the docs navbar's `.brand-lockup--back`). May 2026 v3 — reverted the v2 visual split (.navbar-docs as flush doc bar). The pill is the family default again; future product navbars on OUR surfaces (.navbar-scan, etc.) clone the shared chrome and only diverge where their content / surface-specific children require. The hero-pill metaphor is what makes the family feel like one component family rather than separate primitives. June 2026 — recreating a HOST/partner site's bar (jumper.xyz, lifi.fi-as-host) is NOT this family: that's the in-flow .host-nav below (flat, transparent, no glass pill / fixed positioning). */ .navbar-site, .navbar-docs { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 1400px; height: auto; min-height: 72px; padding: 0 32px; z-index: 1000; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: none; display: flex; align-items: center; justify-content: flex-start; gap: 0; } /* Visual pill on ::before so it can extend below the navbar bounds when a dropdown opens. --nav-dropdown-height is set by JS to each active dropdown's measured height; fallback keeps the effect usable without JS. */ .navbar-site::before, .navbar-docs::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 28px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; pointer-events: none; z-index: -1; transition: background 0.25s cubic-bezier(0.4,0,0.2,1), backdrop-filter 0.25s cubic-bezier(0.4,0,0.2,1), -webkit-backdrop-filter 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), bottom 0.28s cubic-bezier(0.4,0,0.2,1); } .navbar-site:hover::before, .navbar-site.scrolled::before, .navbar-site.nav-dropdown-active::before, .navbar-docs:hover::before, .navbar-docs.scrolled::before, .navbar-docs.nav-dropdown-active::before { /* Glass surface — consumes the canonical panel-glass recipe. */ background: var(--surface-panel-glass); backdrop-filter: var(--backdrop-panel-glass); -webkit-backdrop-filter: var(--backdrop-panel-glass); box-shadow: var(--shadow-panel-glass); } .navbar-site.nav-dropdown-active::before, .navbar-docs.nav-dropdown-active::before { bottom: calc(-1 * var(--nav-dropdown-height, 520px)); } /* `.navbar-docs--preview` — overrides for the catalog's own Docs navbar card. ds-nav.js mounts this modifier when rendering into the #dsNavPreview placeholder so the same navbar markup that ships on live DS pages can also render inline in a catalog viewport pane. Strips fixed positioning + interactivity; keeps all visual chrome. Force-paints the glass pill (the live navbar only paints glass when :hover / .scrolled / .nav-dropdown-active — none of which fire on the inert preview, so the pill would otherwise read as transparent). */ .navbar-docs--preview { position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: none; transform: none; pointer-events: none; } .navbar-docs--preview::before { background: var(--surface-panel-glass); backdrop-filter: var(--backdrop-panel-glass); -webkit-backdrop-filter: var(--backdrop-panel-glass); box-shadow: var(--shadow-panel-glass); } /* ── .host-nav — in-flow host-site navigation (embed preview) ───────── Recreation of a HOST site's top navigation, rendered in normal flow above an embedded widget — the playground's "Site preview" feature uses it to demo the swap widget sitting under jumper.xyz / lifi.fi chrome (body[data-nav-preview], swap.js → initRailNavPreview). Sibling of the .navbar- family but deliberately NOT a clone of its chrome: host navs are flat, transparent, in-flow bars (the host page's own background shows through) — no fixed positioning, no glass pill, no dropdown machinery. Reach for .navbar-site / .navbar-docs when building OUR site chrome; reach for .host-nav when recreating a partner/host site's bar as an embed-context preview. Anatomy (composable slots — omit what the brand doesn't use): __logo brand lockup, inline SVG. In this EMBED PREVIEW the mark FOLLOWS THE ACTIVE THEME (so the mockup re-brands with the canvas + flips light/dark): LI.FI = currentColor; Jumper = two-tone — body on currentColor (--text-primary), spark on --accent-primary. Deliberate preview choice — the real logo assets (logos/jumper/*.svg), .brand-lockup, and downloads keep the --jumper-* brand constants per the Jumper sibling-brand rule (shipping logos never wire to an accent). __nav tab cluster — the .seg.seg--borderless.seg--raised variant (NOT a bespoke link); .is-active rides the raised pill. __actions trailing cluster (margin-left: auto) — compose REAL buttons (.btn-primary Connect, .btn-neutral.btn-icon.btn-circle …) Theming: EVERYTHING routes through tokens — the seg tabs, the .btn-* actions, the preview logo (--text-primary + --accent-primary), AND the font (the tabs read --font-sans) — so a scoped Theme Composer pick re-brands the whole bar end to end. Apply jumper-1 to the canvas and the Connect CTA goes pill-indigo, the logo re-tints, and the tabs become Urbanist (the jumper-1/-2 presets carry font: 'urbanist', which paints --font-sans + lazy-loads the family). Nothing pins a brand font on the preview — under a non-Jumper theme the tabs read that theme's sans, the honest inherit-the-theme behaviour. */ .host-nav { display: flex; align-items: center; gap: var(--space-40); min-height: var(--space-72); font-family: var(--font-sans); } .host-nav__logo { display: inline-flex; align-items: center; color: var(--text-primary); text-decoration: none; flex-shrink: 0; } /* overflow: visible — the LI.FI mark's corner curves bulge past the viewBox edge (see the lifi-mark rule above). */ .host-nav__logo svg { height: var(--space-24); width: auto; overflow: visible; } .host-nav--lifi .host-nav__logo svg { height: var(--space-28); } /* Jumper preview mark is two-tone, theme-following: the spark always takes Accent 2 (inline fill: var(--accent-secondary) on its path); the body + wordmark (currentColor here) take Accent 1 in light mode and Accent 3 in dark (a deliberate dark-only swap). LI.FI stays currentColor (--text-primary). Canonical brand assets (logos/jumper/*.svg) keep --jumper-*. */ .host-nav--jumper .host-nav__logo { color: var(--accent-primary); } [data-theme="dark"] .host-nav--jumper .host-nav__logo { color: var(--accent-tertiary); } /* Tab cluster — the bespoke .host-nav__links / .host-nav__link primitive retired June 2026 → the .seg.seg--borderless.seg--raised tab-bar variant. The raised card-pill active state (--surface-card + --elev-1, --r-full) and the neutral 4% hover that lived here moved verbatim into .seg--raised. The