/* * lsd-tokens.css — the LSD Dynamic Token Ladder. * * The default :root token block used by every framework doc page. Five SEED * colors are authored; the other six canonical tokens are DERIVED rungs, * computed live by the ladder formulas below. Change a seed (the palette * switcher overrides them inline on ) and every rung recomputes. * * The step ratios mirror LADDER_STEPS in src/core/tokenLadder.ts — that module * is the JS twin used by the editor, exports and the API. A test keeps the * two in sync. Do not hardcode --bg-elev / --ink-dim / … — they are functions. * * Pages that intentionally diverge (studies/, aurora/) may override any token * inline AFTER linking this file. */ :root { /* ═══ SEEDS — the only authored colors ══════════════════════════════════ * The 5 inputs the palette engine / user decides. Everything else is a * function of these. Never author a non-seed token. * ══════════════════════════════════════════════════════════════════════ */ --bg: #07060f; --ink: #ece9ff; --accent: #a78bfa; --accent-2: #22d3ee; --accent-3: #f472b6; /* ═══ LADDER STEPS — tunable ratios ═════════════════════════════════════ * Mirror of LADDER_STEPS in src/core/tokenLadder.ts. Percentages here map * to fractions there (6% ↔ 0.06). A light theme flips the contrast steps * (see the [data-theme="light"] block below) — the formulas never change. * ══════════════════════════════════════════════════════════════════════ */ --elev-step: 6%; /* --bg → --bg-elev */ --elev-step-2: 13%; /* --bg → --bg-elev-2 */ --ink-dim-step: 0.75; /* --ink lightness × */ --ink-faint-step: 0.66; /* --ink lightness × */ --line-step: 8%; /* --ink alpha */ --line-strong-step: 16%; /* --ink alpha */ /* ═══ DERIVED RUNGS — computed, never authored ══════════════════════════ */ /* Elevation ladder (Z-axis) — surfaces rise toward the contrast pole. */ --bg-elev: color-mix(in oklch, var(--bg), var(--ink) var(--elev-step)); --bg-elev-2: color-mix(in oklch, var(--bg), var(--ink) var(--elev-step-2)); /* Contrast ladder — text dims by lowering lightness, holding hue+chroma, * so the brand tint survives instead of decaying to gray. */ --ink-dim: oklch(from var(--ink) calc(l * var(--ink-dim-step)) c h); --ink-faint: oklch(from var(--ink) calc(l * var(--ink-faint-step)) c h); /* Line ladder — --ink at a faint alpha, so borders track the palette. */ --line: color-mix(in srgb, transparent, var(--ink) var(--line-step)); --line-strong: color-mix(in srgb, transparent, var(--ink) var(--line-strong-step)); --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --font-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif; /* ─── Legacy aliases ──────────────────────────────────────────────── * Older framework pages (/framework/index.html, motion/, theory/, parts of * blocks/*) still reference the `--color-*` and `--radius-*` vocabulary. The * palette switcher only writes the canonical names on , so without * these aliases those pages don't repaint when a preset flips. * * Aliases live INSIDE :root so the inline values JS writes to (which * land on the canonical names) cascade through `var(...)` here and the * legacy names always resolve to the live palette. Do not promote any of * these to first-class — canonical names are the documented API. * ──────────────────────────────────────────────────────────────────── */ --color-bg: var(--bg); --color-surface: var(--bg-elev); --color-surface-2: var(--bg-elev-2); --color-text: var(--ink); --color-text-dim: var(--ink-dim); --color-text-faint: var(--ink-faint); --color-accent: var(--accent); --color-border: var(--line); --color-border-strong: var(--line-strong); --radius-md: var(--r-md); --radius-lg: var(--r-lg); } /* * Light theme — the ladder is mode-free EXCEPT the contrast ladder: --ink is * dark in light mode, so dimming must RAISE lightness (multiplier > 1). The * formulas are untouched; only the two contrast steps flip. A light page also * sets light --bg / --ink seeds. */ [data-theme="light"], .theme-light { --ink-dim-step: 1.18; --ink-faint-step: 1.34; }