/* JayBoard design tokens — the single source of truth for colors + widget metrics. Loaded first by BOTH index.html and board.html, before widgets.css and the page stylesheet. Theming: light is the default; the app follows the OS (prefers-color-scheme) unless the user picks a theme, which stamps (persisted in localStorage; set before paint by a tiny inline script in index.html / board.html to avoid a flash). The sidebar toggle lives in auth.js. The extension's in-page overlay runs in a shadow DOM and can't read this file, so it mirrors these VALUES as constants in extension/src/content/select.ts — keep the two in sync. */ :root { color-scheme: light dark; /* palette — light (default) */ --bg: #f5f6f8; --panel: #ffffff; --panel-2: #eceef3; --border: #e3e6ec; --text: #16181d; --muted: #5b6472; --accent: #4f7cff; --green: #0fa968; --danger: #d64545; /* widget metrics (theme-independent) */ --radius-sm: 6px; --radius: 8px; --radius-pill: 999px; --control-h: 36px; --fs: 13px; --fs-sm: 12px; --font: system-ui, -apple-system, sans-serif; --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } /* dark palette, shared by the OS-dark default and the explicit dark choice */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0f1115; --panel: #14161b; --panel-2: #1b1e24; --border: #262b34; --text: #e8eaed; --muted: #8b919c; --accent: #5b8cff; --green: #19c37d; --danger: #e5484d; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1115; --panel: #14161b; --panel-2: #1b1e24; --border: #262b34; --text: #e8eaed; --muted: #8b919c; --accent: #5b8cff; --green: #19c37d; --danger: #e5484d; }