/* The design tokens, and the only file that names a colour. Two mirrored blocks: :root for light, and the dark overrides. Kept mirrored literally -- same order, same names -- because the failure this shape guards against is a token defined in one block and forgotten in the other, which produces a control that is invisible in exactly one theme and is very easy to ship. token-audit.js fails the build on that. `color-scheme` is declared explicitly in both. Without it the browser paints select popups, date pickers, scrollbars, carets and autofill from its own default, so a dark app gets a white dropdown and a white caret on a dark field. It is one line and it is not optional. */ :root { color-scheme: light; /* Surfaces, lightest to most raised. */ --page: #f7f8fa; --surface-1: #ffffff; --surface-2: #f1f3f7; --surface-3: #e7eaf1; /* A table header scrolls over rows, so it must be OPAQUE -- a translucent sticky header shows the text sliding underneath it. */ --surface-sticky: #ffffff; --surface-overlay: #ffffff; /* Text, strongest to faintest. */ --ink-1: #10151f; --ink-2: #48526a; --ink-3: #78829c; /* Rules. --line-table is lighter than --line on purpose: a full-strength rule between forty rows reads as noise rather than as structure. */ --line: #dde1ea; --line-strong: #c3cad8; --line-table: #eaedf3; --accent: #1f6fd6; --accent-ink: #ffffff; --accent-soft: #e8f0fc; /* Rows. Zebra is deliberately transparent: zebra striping is a FALLBACK for a rule that is too faint to read, and shipping both at once is how a table ends up looking busy. Pick one. */ --row-hover: #f4f7fd; --row-selected: #e8f0fc; --row-selected-line: var(--accent); --row-zebra: transparent; /* Lifecycle. Each is a pair -- the colour and a tint of it -- so a status badge is one class rather than two hand-picked values. */ --state-open: #1f6fd6; --state-won: #0f7b4f; --state-lost: #b3261e; --state-stale: #8a6d1f; --state-draft: #78829c; --state-sent: #1f6fd6; --state-paid: #0f7b4f; --state-overdue: #b3261e; --good: #0f7b4f; --warning: #8a6d1f; --critical: #b3261e; /* Density. A compact table flips one class on and nothing else changes. */ --row-h: 36px; --field-h: 34px; --cell-pad-x: 12px; --font-size-table: 13px; --radius-card: 14px; /* A 14px radius on a 34px control looks broken, hence a second one. */ --radius-control: 7px; --shadow-card: 0 1px 2px rgba(16, 21, 31, .06), 0 1px 3px rgba(16, 21, 31, .04); --shadow-pop: 0 8px 28px rgba(16, 21, 31, .16); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; } :root.dark { color-scheme: dark; --page: #0e1116; --surface-1: #161b23; --surface-2: #1d232d; --surface-3: #262d39; --surface-sticky: #161b23; --surface-overlay: #1d232d; --ink-1: #e8ecf4; --ink-2: #a3adc2; --ink-3: #78829c; --line: #2a323f; --line-strong: #3c4656; --line-table: #222933; --accent: #4d95ea; --accent-ink: #0b1220; --accent-soft: #17293f; --row-hover: #1b222c; --row-selected: #17293f; --row-selected-line: var(--accent); --row-zebra: transparent; /* Re-stepped by hand for a dark surface, not lightened programmatically: the greens and reds need more lift than the blues to stay legible. */ --state-open: #4d95ea; --state-won: #35b37e; --state-lost: #f2705f; --state-stale: #d0a634; --state-draft: #78829c; --state-sent: #4d95ea; --state-paid: #35b37e; --state-overdue: #f2705f; --good: #35b37e; --warning: #d0a634; --critical: #f2705f; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3); --shadow-pop: 0 8px 28px rgba(0, 0, 0, .55); }