/* theme-light.css — optional warm cream light theme. * Activates only when `` is set. Tokens override the * dark defaults from tokens.css. No selector overrides are needed because * every component in components.css reads through the `var(--token)` layer. * * Toggle in the browser console to preview: * document.documentElement.dataset.theme = 'light' * document.documentElement.dataset.theme = 'dark' */ [data-theme="light"] { --ink-0: #f5f0e6; /* warm cream */ --ink-1: #faf5ec; /* canvas */ --ink-2: #efe8d9; /* raised surface */ --ink-3: #e5dccb; /* hover */ --line: #d8cfbd; --line-soft: #e5dccb; --fg: #1a1814; --fg-2: #4a463e; --fg-3: #78716a; --fg-4: #a8a198; --accent: oklch(0.62 0.14 70); --accent-dim: oklch(0.48 0.10 70); } [data-theme="light"] { color-scheme: light; } [data-theme="light"] body { background: var(--ink-1); color: var(--fg); } [data-theme="light"] ::selection { background: var(--accent); color: #fff; }