/* Design tokens — the single source of truth for both consumers. * * - the React app imports this into its bundle at build time * - app/login_page.py links it directly, because the sign-in page must render * even when the SPA build is broken or half-swapped * * Two vocabularies live here on purpose: * * legacy (--bg, --ink, --line, ...) used by static/styles.css and the login * page. Deleted once the vanilla UI goes. * shadcn (--background, --primary, used by the React app. * --muted, ...) * * They are the same palette expressed twice, so the old and new UIs cannot * drift apart mid-migration. * * Dark mode is CLASS-based, not media-based: a VA whose laptop is in light mode * must still be able to choose dark. An inline script sets `.dark` on * before first paint — see web/index.html and app/login_page.py. */ :root { color-scheme: light; /* -- legacy vocabulary ------------------------------------------------- */ --bg: #ffffff; --surface: #fbfbfb; --line: #e8e8e8; --line-strong: #d8d8d8; --ink: #111213; --dim: #6a6f76; --faint: #9aa0a6; --accent: #111213; --accent-ink: #ffffff; /* text ON --accent. Was hard-coded #fff. */ --ok: #14713d; --ok-bg: #f0f7f2; --warn: #8a5b00; --warn-bg: #fdf7ec; --bad: #a4231b; --bad-bg: #fdf2f1; --accent-hover: #2c2f33; --nav-active: #f2f2f2; --scrim: rgba(17, 18, 19, 0.28); --focus-outline: #c9d4e4; --ok-line: #cfe4d7; --warn-line: #ecd9a8; --bad-line: #e9c9c6; --focus-ring: rgba(17, 18, 19, 0.12); --radius: 10px; /* -- shadcn vocabulary -------------------------------------------------- */ --background: var(--bg); --foreground: var(--ink); --card: var(--bg); --card-foreground: var(--ink); --popover: var(--bg); --popover-foreground: var(--ink); --primary: var(--accent); --primary-foreground: var(--accent-ink); --secondary: var(--surface); --secondary-foreground: var(--ink); --muted: var(--surface); --muted-foreground: var(--dim); --border: var(--line); --input: var(--line-strong); --ring: var(--accent); --destructive: var(--bad); --destructive-foreground: #ffffff; } .dark { color-scheme: dark; /* Not an inversion. Near-black rather than pure black so elevation reads, * and text held just under #fff so long shifts do not glare. */ --bg: #0c0d0e; --surface: #141618; --line: #232628; --line-strong: #34383c; --ink: #e8eaec; --dim: #99a1a9; --faint: #6d757c; --accent: #e8eaec; --accent-ink: #0c0d0e; /* dark text on the light button */ --ok: #4ade80; --ok-bg: #12241a; --warn: #fbbf24; --warn-bg: #241d0e; --bad: #f87171; --bad-bg: #2a1516; --accent-hover: #cdd0d3; --nav-active: #1e2124; --scrim: rgba(0, 0, 0, 0.62); --focus-outline: #3d5a80; --ok-line: #1e3a29; --warn-line: #3a2f14; --bad-line: #45211f; --focus-ring: rgba(232, 234, 236, 0.16); --destructive-foreground: #1a0f10; }