/* BTN Command · Shared design tokens (2026-07-08 redesign; values updated 2026-08-10 from the approved Claude Design handoff — docs/redesign-handoff/). Slate accent, near-black sidebar/chrome (constant across themes), light/dark content surfaces toggled via [data-theme] on . Linked by both the dashboard (public/index.html) and every driver-facing page (routes/driverPortal.js, driverAvailability.js, loadOffer.js) so there is exactly one place these colors are defined. 2026-08-10 changes: 5 value updates (radius-card, radius-pill, red, light-muted, light-pickup-text — see docs/redesign-handoff/handoff-notes.md) plus the additive type/spacing/shadow token blocks at the bottom. Every pre-existing token name is unchanged. */ :root { --sidebar-bg: #0F1115; --sidebar-text: #9A9DA6; --sidebar-text-active: #8CA9C4; --sidebar-border: rgba(255,255,255,0.08); --sidebar-hover: rgba(255,255,255,0.06); --accent: #4A6079; --accent-hover: #5A738F; --accent-text: #ffffff; /* Fill/indicator use only (button fills, dots, bar fills) — NOT text colors. For colored text use the tuned --s-*-text tokens: --s-delivered-text (positive), --s-cancelled-text (negative), --s-settled-text (info). */ --green: #1D8A5E; --red: #C63C3C; --blue: #2E5FE8; --radius-card: 12px; --radius-control: 8px; --radius-pill: 9999px; /* Dark mode (default) */ --bg: #0B0D10; --surface: #101216; --card: #16181C; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --text: #F2F3F5; --muted: #9A9DA6; --accent-soft-bg: rgba(74,96,121,0.24); --accent-soft-text: #8CA9C4; --s-pending-bg: rgba(148,153,163,0.16); --s-pending-text: #B9BCC4; --s-approved-bg: rgba(74,96,121,0.24); --s-approved-text: #8CA9C4; --s-dispatched-bg: rgba(109,91,208,0.22); --s-dispatched-text: #B0A2EE; --s-pickup-bg: rgba(192,138,31,0.22); --s-pickup-text: #E3B45D; --s-in_transit-bg: rgba(13,148,136,0.22); --s-in_transit-text: #5FCFC3; --s-delivered-bg: rgba(29,138,94,0.22); --s-delivered-text: #63CB9D; --s-factored-bg: rgba(198,93,180,0.22); --s-factored-text: #E39BD3; --s-settled-bg: rgba(46,95,232,0.22); --s-settled-text: #7DA3F2; --s-cancelled-bg: rgba(210,70,70,0.22); --s-cancelled-text: #EE8E8E; } :root[data-theme="light"] { --bg: #F5F6F8; --surface: #ffffff; --card: #ffffff; --border: #E4E6EA; --border-strong: #D3D6DC; --text: #14171A; --muted: #63666E; --accent-soft-bg: #E5EAEF; --accent-soft-text: #33465A; --s-pending-bg: #EFEFF1; --s-pending-text: #5C5F66; --s-approved-bg: #E5EAEF; --s-approved-text: #33465A; --s-dispatched-bg: #EBE7FA; --s-dispatched-text: #4A3B9E; --s-pickup-bg: #F7EDDA; --s-pickup-text: #7A5410; --s-in_transit-bg: #DDF3F0; --s-in_transit-text: #0A6E64; --s-delivered-bg: #DFF2E9; --s-delivered-text: #146645; --s-factored-bg: #FBE6F5; --s-factored-text: #8E3A7B; --s-settled-bg: #E6EEFD; --s-settled-text: #1D4BC7; --s-cancelled-bg: #FBE4E4; --s-cancelled-text: #A32D2D; } /* --------------------------------------------------------------------------- Additive tokens (2026-08-10 redesign handoff). New names only — nothing above referenced these before, so adopting them changes no existing rule. component-specs.md in docs/redesign-handoff/ references these throughout. ------------------------------------------------------------------------ */ :root { /* Type families */ --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* every UI string: nav, headings, table text, buttons */ --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* load numbers (BTN-YYYYMMDD-NNNN), W-numbers, MC/DOT #s */ /* Type scale (px; line-heights are per-component in the specs) */ --text-display: 38px; /* stat-card primary numbers only */ --text-h1: 30px; /* page title in the topbar */ --text-h2: 22px; /* modal title */ --text-h3: 17px; /* panel / card headers */ --text-h4: 15px; /* row titles, table cell emphasis, button text */ --text-body-lg: 16px; /* modal body copy, empty-state copy */ --text-body: 14px; /* default UI text: table cells, form inputs, nav */ --text-caption: 12.5px; /* secondary metadata under a row title, help text */ --text-micro: 11px; /* status badges, table column headers, field labels */ /* Weights */ --weight-regular: 400; /* body copy, table cell values */ --weight-medium: 500; /* nav items, row titles, secondary buttons */ --weight-semibold: 600; /* headings, stat numbers, badges, primary buttons */ /* Spacing scale (4px-based) */ --space-1: 4px; /* icon-to-label gap inside a badge or pill */ --space-2: 8px; /* tight stacks: label to field, dot to text */ --space-3: 12px; /* nav item padding, filter pill gaps */ --space-4: 16px; /* form field vertical rhythm, card grid gap */ --space-5: 20px; /* card interior padding (compact), table cell h-padding */ --space-6: 24px; /* card interior padding (default), panel padding */ --space-7: 32px; /* modal interior padding, section gap */ --space-8: 40px; /* gap between major dashboard sections */ --space-9: 48px; /* page top padding on desktop */ --space-10: 64px; /* empty-state vertical padding */ --space-11: 80px; /* reserved — full-page empty / error states */ /* Elevation — dark values; light overrides below. Theme-dependent by design: dark shadows must be much heavier to read at all. In dark mode elevation is still carried mostly by --border/--card stepping up from --bg; shadow is a secondary cue — don't put --shadow-md on resting elements. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); /* resting cards, table container */ --shadow-md: 0 4px 14px rgba(0,0,0,0.40); /* dropdowns, hovered clickable cards */ --shadow-lg: 0 18px 44px rgba(0,0,0,0.58); /* modals, right-side drawer */ /* Neutral ramp the surface tokens derive from. Components should use the semantic tokens (--bg/--surface/--card/--border/--text/--muted); reach for the ramp only for one-off chrome with no semantic token. */ --neutral-0: #FFFFFF; --neutral-50: #F5F6F8; --neutral-100: #EDEEF1; --neutral-200: #E4E6EA; --neutral-300: #D3D6DC; --neutral-400: #A8ABB3; --neutral-500: #7E828A; --neutral-600: #63666E; --neutral-700: #4A4D54; --neutral-800: #2A2D33; --neutral-900: #16181C; --neutral-950: #0B0D10; } :root[data-theme="light"] { --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow-md: 0 4px 14px rgba(16,24,40,0.09); --shadow-lg: 0 18px 44px rgba(16,24,40,0.17); } /* Theme toggle control — a small pill switch, reused verbatim on every surface (dashboard topbar, driver portal header). */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-strong); color: var(--muted); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; cursor: pointer; font-family: inherit; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); }