/* Canonical design tokens — copied verbatim from design/Tokens.dc.html. * Do not hand-edit: change the artboard, re-run design/build.mjs, re-extract. * * Contrast floors: text/background pairs >= 4.5:1 (WCAG 1.4.3). Non-text tokens * that carry meaning — --border-strong (an interactive edge), --score-fill * against --score-track, --focus-ring — are >= 3:1 (1.4.11). The floors are * asserted, per theme, by `node scripts/contrast.mjs`; its exit code is the gate. * * NOT >= 3:1, deliberately: --border-subtle (~1.2:1 on --bg-surface) and * --score-track (~1.2:1) are a divider and a groove — decorative, and outside * 1.4.11's "graphical objects required to understand content". Raising them * would make every table read as a grid. The earlier blanket claim that all * non-text tokens clear 3:1 was false, and a dark mode must not inherit it. * * Themeable tokens are one `light-dark()` declaration each, not two hand-copied * blocks, so the two halves cannot drift. The raw scale below is NOT themed: it * is the palette the artboards draw from, and the semantic aliases are what the * app is allowed to use. */ :root { color-scheme: light dark; --slate-950: #12161c; --slate-900: #1c2431; --slate-800: #2c3a4f; --slate-700: #33415c; --slate-600: #5c6675; --slate-500: #77839a; --slate-300: #ccd3de; --slate-200: #e3e7ee; --slate-100: #f5f7fa; --slate-050: #eef0f4; --white: #ffffff; --accent-700: #23406e; --accent-600: #2c5282; --accent-100: #e4ecf6; --amber-700: #8a5200; --amber-100: #fbf0dc; --green-700: #1c5230; --green-300: #7fd3a4; --green-100: #e2f1e7; --red-600: #b3261e; --red-100: #fbe6e4; --bg-canvas: light-dark(#eef0f4, #0d1117); --bg-surface: light-dark(#ffffff, #161b22); --bg-sunken: light-dark(#f5f7fa, #1c222b); --bg-elevated: light-dark(#ffffff, #1c222b); /* Darker than --bg-canvas in BOTH themes. The rail/content split is the primary structural cue on every page; a rail that matches the canvas erases it. */ --bg-nav: light-dark(#1c2431, #010409); --bg-nav-active: light-dark(#2c3a4f, #1f2733); --text-primary: light-dark(#12161c, #e6edf3); --text-secondary: light-dark(#374151, #a8b3cf); /* Dark-mode value is the dark canvas, not white: white on a light-blue --accent is 3.10:1. */ --text-inverse: light-dark(#ffffff, #0d1117); /* The rail and status bar are dark in both themes, so these two are not themed. */ --text-nav: #c8d0dc; --text-nav-dim: #a4aebf; --border-subtle: light-dark(#e3e7ee, #21262d); --border-default: light-dark(#ccd3de, #30363d); --border-strong: light-dark(#77839a, #6e7681); --accent: light-dark(#23406e, #79b8ff); --accent-strong: light-dark(#23406e, #a5d6ff); --accent-weak: light-dark(#e4ecf6, #14253c); --focus-ring: light-dark(#23406e, #79b8ff); --score-track: light-dark(#e3e7ee, #262c36); --score-fill: light-dark(#23406e, #79b8ff); --warn-text: light-dark(#6e4100, #e3b341); --warn-weak: light-dark(#fbf0dc, #2b2000); --ok-text: light-dark(#1c5230, #3fb950); --ok-weak: light-dark(#e2f1e7, #0c2618); --danger-text: light-dark(#961c15, #ff9b94); --danger-weak: light-dark(#fbe6e4, #2d0f0d); --overlay-scrim: light-dark(rgba(18, 22, 28, 0.4), rgba(1, 4, 9, 0.6)); /* On the always-dark chrome (rail, status bar), where the light-theme --ok-text/--warn-text measure 2.4-3.7:1. Unthemed for the same reason --text-nav is. */ --ok-text-on-dark: var(--green-300); --warn-text-on-dark: #e3b341; --font-ui: 'IBM Plex Sans', system-ui, sans-serif; --font-display: 'IBM Plex Serif', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --radius: 4px; --radius-pill: 999px; /* A shadow is a lighting model, and in dark mode there is no light to occlude: rgba(18,22,28,.06) over #0d1117 measures ~1.0:1, i.e. nothing. Dark elevation is a ring — the higher surface reads as nearer because its edge is brighter, not darker. light-dark() is a function (CSS Color 5), so it wraps the shadow COLOURS, not the whole shadow: the geometry of both layers is always present and the layer that does not apply in a theme is `transparent`, which costs nothing to paint. */ --elev-1: 0 1px 2px light-dark(rgba(18, 22, 28, 0.10), transparent), 0 0 0 1px light-dark(transparent, #30363d); --elev-2: 0 4px 12px light-dark(rgba(18, 22, 28, 0.16), transparent), 0 0 0 1px light-dark(transparent, #484f58); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); } /* An explicit choice, stamped on server-side from the `theme` cookie. Flipping color-scheme is all it takes: every themed token is a light-dark() that resolves against it, and so are the form controls, checkboxes, scrollbars, autofill and selection colours that no custom property reaches. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; } a { color: var(--accent); } a:hover { color: var(--accent-strong); } /* --------------------------------------------------------------------------- * Repeated row treatments, hoisted out of `style="…"` attributes. * * Not from the artboard and not tokens — but they belong in THIS file rather * than in a `style="…"` attribute, because a class name is written once here * and the literal is written once PER ROW. /jobs renders PAGE_SIZE (50) table * rows plus two 25-row bands, so an inline literal is paid 50-126 times per * page: measured at 205KB with 80.9KB of style attributes against a 200KB * budget, the single worst literal (`font-size: 12px; color: * var(--text-secondary)`) appearing 126 times. * * NOT because this file is cached: serveStatic (web/server.ts) sends it with * `cache-control: no-store`, so it is re-fetched on every page load exactly * like render.ts's inline