Design tokens

Two axes: data-theme picks the recipe (mono, glass, tactile, liquid, neu, chrome, parallax, retro, generative), data-mode picks the palette (light, color, dark). Tokens in tokens.css, palettes in modes.css, recipes in themes.css — components use vars only.

Radius, shadows, blur, and depth come from the active recipe; color accents appear only in color mode (one curated accent per theme, generative rotates daily). Dark mode keeps every recipe legible.

Fonts via next/font: Inter (body), Fraunces (display serif), JetBrains Mono (labels). Self-hosted for performance.