:root { --bg: #fafaf9; --fg: #1c1917; --muted: #78716c; --border: #e7e5e4; --accent: #C2410C; --danger: #b91c1c; /* Surface tokens — what was previously hard-coded as `white` / `#f5f5f4` / `#fafaf9`. These exist so [data-theme="dark"] can re-paint cards, tables, hover states, etc. in one place rather than duplicating every selector. Keep using the named tokens, not the literal hex values. */ --surface: #ffffff; /* card / panel / table / modal background */ --surface-alt: #f5f5f4; /* icon tile, code inline, kanban col, kbd */ --row-hover: #fafaf9; /* table-row hover, icon-btn hover, selected todo */ --on-accent: #ffffff; /* text on a `var(--accent)` background */ --on-fg: #ffffff; /* text on a `var(--fg)` background (chip.active, chatbot inverse) */ --scrim: rgba(28, 25, 23, 0.35); /* modal backdrops */ } /* Dark theme — surfaces darken, ink lightens, accent shifts to a brighter orange so it still reads as the focus colour against the dark surface. The accent buttons flip to dark text on the lighter orange for contrast. */ [data-theme="dark"] { --bg: #0c0a09; --fg: #f5f5f4; --muted: #a8a29e; --border: #292524; --accent: #fb923c; --danger: #f87171; --surface: #1c1917; --surface-alt: #292524; --row-hover: #292524; --on-accent: #0c0a09; --on-fg: #0c0a09; --scrim: rgba(0, 0, 0, 0.55); color-scheme: dark; } * { box-sizing: border-box; } /* Honour the HTML5 `hidden` attribute even when a rule like `form.meta { display: grid }` would otherwise override it. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } body { font: 14px/1.45 system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); overflow-x: hidden; } body.centered { display: grid; place-items: center; min-height: 100vh; padding: 16px; box-sizing: border-box; } .card { background: var(--surface); padding: 32px; border: 1px solid var(--border); border-radius: 8px; max-width: 360px; } /* ── Primary nav: persistent left sidebar (desktop), slide-in drawer (mobile) The same