/* Design tokens — the one place a colour is written down. Both pages read these names and add nothing of their own to :root. Light is the default block; dark redefines the same names. The theme attribute is set before first paint by the inline script in , so neither block ever flashes over the other. */ :root { color-scheme: light; --bg: #f7f7f8; --bg-raised: #ffffff; --bg-sunken: #eeeef1; --fg: #16161a; --fg-dim: #55555f; --fg-faint: #86868f; --line: #e2e2e7; --line-strong: #cdcdd5; --accent: #4f46e5; --accent-ink: #ffffff; --accent-soft: rgba(79, 70, 229, 0.1); --ok: #15803d; --warn: #a16207; --err: #b91c1c; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16, 16, 26, 0.06), 0 8px 24px rgba(16, 16, 26, 0.06); --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; } :root[data-theme='dark'] { color-scheme: dark; --bg: #0f0f12; --bg-raised: #17171b; --bg-sunken: #0a0a0d; --fg: #f2f2f5; --fg-dim: #a6a6b0; --fg-faint: #6f6f7a; --line: #26262d; --line-strong: #35353f; --accent: #8b7cff; --accent-ink: #0f0f12; --accent-soft: rgba(139, 124, 255, 0.14); --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); }