/* ============================================================ Shared design tokens — used by Landing.html and the app prototype. Palette (accent hue family) is switched via [data-palette] on . Theme (light/dark neutrals) via [data-theme]. Brand via [data-brand]. ============================================================ */ :root { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* radii + motion */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --ease: cubic-bezier(.22, .8, .3, 1); } /* ---------- PALETTES (accent family; shared chroma, varied hue) ---------- */ :root, [data-palette="violet"] { --accent: oklch(0.62 0.205 295); --accent-bright: oklch(0.72 0.19 300); --accent-2: oklch(0.70 0.15 250); --accent-ink: #ffffff; /* text/icon sitting on accent fill */ --accent-soft: oklch(0.62 0.205 295 / 0.14); --glow: oklch(0.62 0.205 295 / 0.45); } [data-palette="lime"] { --accent: oklch(0.84 0.20 128); --accent-bright: oklch(0.90 0.20 125); --accent-2: oklch(0.80 0.13 200); --accent-ink: #0c1207; --accent-soft: oklch(0.84 0.20 128 / 0.16); --glow: oklch(0.84 0.20 128 / 0.40); } [data-palette="green"] { --accent: oklch(0.72 0.155 153); --accent-bright: oklch(0.80 0.16 150); --accent-2: oklch(0.78 0.115 190); --accent-ink: #04140b; --accent-soft: oklch(0.72 0.155 153 / 0.16); --glow: oklch(0.72 0.155 153 / 0.42); } [data-palette="coral"] { --accent: oklch(0.70 0.185 32); --accent-bright: oklch(0.78 0.17 40); --accent-2: oklch(0.80 0.13 70); --accent-ink: #1a0d06; --accent-soft: oklch(0.70 0.185 32 / 0.16); --glow: oklch(0.70 0.185 32 / 0.42); } /* ---------- THEMES (near-neutral, faintly cool) ---------- */ [data-theme="dark"] { --bg: oklch(0.165 0.012 280); --bg-2: oklch(0.205 0.014 280); --surface: oklch(0.225 0.015 280); --surface-2: oklch(0.27 0.016 280); --surface-hi: oklch(0.31 0.016 280); --text: oklch(0.975 0.004 280); --text-2: oklch(0.76 0.012 280); --text-3: oklch(0.60 0.012 280); --border: oklch(1 0 0 / 0.10); --border-2: oklch(1 0 0 / 0.055); --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); --grid-line: oklch(1 0 0 / 0.035); --ok: oklch(0.78 0.15 155); --warn: oklch(0.80 0.15 70); --danger: oklch(0.70 0.18 25); } [data-theme="light"] { --bg: oklch(0.985 0.004 280); --bg-2: oklch(0.955 0.005 280); --surface: #ffffff; --surface-2: oklch(0.975 0.004 280); --surface-hi: oklch(0.96 0.005 280); --text: oklch(0.22 0.012 280); --text-2: oklch(0.45 0.012 280); --text-3: oklch(0.60 0.012 280); --border: oklch(0.22 0.02 280 / 0.13); --border-2: oklch(0.22 0.02 280 / 0.07); --shadow: 0 30px 70px -28px rgba(20, 18, 40, 0.30); --grid-line: oklch(0.22 0.02 280 / 0.05); --ok: oklch(0.58 0.14 155); --warn: oklch(0.62 0.14 65); --danger: oklch(0.58 0.18 25); } /* semantic helpers reused everywhere */ .u-mono { font-family: var(--font-mono); } .u-accent { color: var(--accent); }