/* @bydrec/ai-shell — design tokens (decision D2, 2026-09-17). * * The rail is dark in both themes and TINTED per department (D2-revised: Marketing deep blue, * Finance navy-teal, Sales umber, Operations indigo-violet — createShell sets --rail inline). * The canvas default is per department too (Finance dark, Marketing light; THEME_PRESETS); a * person can pin data-theme="light|dark" on per browser with the header toggle * (the shell remembers the pin per browser). The department accent is ONE variable, --dept, * set by the shell from the department key; everything accent-coloured derives from it. * * Every token has its light value on bare :root, is redefined for dark under the OS query guarded * by :root:not([data-theme="light"]), and again under :root[data-theme="dark"] so an explicit pin * wins in both directions. Never define a colour only inside a media block. */ :root { /* surfaces + ink */ --canvas: #f4f5f9; --paper: #ffffff; --ink: #1b1f2a; --ink-2: #4b5263; --ink-3: #7d8497; --line: #e1e4ec; --line-2: #cfd4e0; /* the rail (always dark) */ --rail: #16203a; --rail-2: #1e2a4a; --rail-ink: #c9d0e3; --rail-ink-2: #8b95b3; /* department accents — the shell sets --dept to one of these */ --dept-marketing: #2563eb; --dept-finance: #00b894; --dept-sales: #d97706; --dept-operations: #7c3aed; --dept-recruiting: #db2777; --dept-it: #0891b2; --dept: var(--dept-finance); --dept-ink: #ffffff; --dept-dim: color-mix(in srgb, var(--dept) 12%, transparent); /* semantic (separate from the accent) */ --good: #2e8b57; --good-dim: rgba(46, 139, 87, .13); --warn: #b7791f; --warn-dim: rgba(183, 121, 31, .14); --bad: #c0392b; --bad-dim: rgba(192, 57, 43, .12); --info: #2f6fd6; --info-dim: rgba(47, 111, 214, .12); /* type */ --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; --fs-xs: .72rem; --fs-sm: .82rem; --fs-md: .92rem; --fs-base: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.9rem; --lh: 1.5; /* spacing, radius, shadow */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --radius: 8px; --radius-sm: 5px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(20, 24, 40, .06), 0 4px 14px rgba(20, 24, 40, .06); --shadow-lg: 0 8px 30px rgba(20, 24, 40, .18); /* layout */ --rail-w: 232px; --rail-w-collapsed: 60px; --header-h: 52px; --focus: 2px solid var(--dept); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #0f1320; --paper: #171c2c; --ink: #e6e9f2; --ink-2: #aab2c8; --ink-3: #7d869e; --line: #262d42; --line-2: #333c57; --rail: #0b0f1c; --rail-2: #141a2c; --dept-dim: color-mix(in srgb, var(--dept) 18%, transparent); --good-dim: rgba(46, 139, 87, .22); --warn-dim: rgba(183, 121, 31, .22); --bad-dim: rgba(192, 57, 43, .22); --info-dim: rgba(47, 111, 214, .22); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); --shadow-lg: 0 8px 30px rgba(0, 0, 0, .55); color-scheme: dark; } } :root[data-theme="dark"] { --canvas: #0f1320; --paper: #171c2c; --ink: #e6e9f2; --ink-2: #aab2c8; --ink-3: #7d869e; --line: #262d42; --line-2: #333c57; --rail: #0b0f1c; --rail-2: #141a2c; --dept-dim: color-mix(in srgb, var(--dept) 18%, transparent); --good-dim: rgba(46, 139, 87, .22); --warn-dim: rgba(183, 121, 31, .22); --bad-dim: rgba(192, 57, 43, .22); --info-dim: rgba(47, 111, 214, .22); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); --shadow-lg: 0 8px 30px rgba(0, 0, 0, .55); color-scheme: dark; }