/* ============================================================================
FleetView — Apple-semantic design tokens (tokens.css)
============================================================================
Governing plan: docs/APPLE_UI_RESTYLE_FEASIBILITY.md (§7/§8 override §1–§6).
Mapping authority: docs/DESIGN_TOKENS_MAP.md — read it before migrating any
hardcoded hex in app.css or the secondary pages.
HARD RULES (do not relax):
- Visual-only. This file defines COLOR / RADIUS / SHADOW / MATERIAL tokens.
It must never define layout values. `--drivers-grid` intentionally stays
in app.css and MUST NOT be redefined here.
- Font stack is FROZEN to the existing system stack (below). No Inter, no
webfonts. Icons (Tabler `ti ti-*`) are frozen too — nothing here touches
them.
- Materials (`--material-*`) are ONLY for static chrome: top bar, sidebar,
modal scrims/cards. NEVER apply backdrop-filter to live-refreshing
regions (fleet tables, Day Plan lists) or the Google Map container.
OWNERSHIP & LOAD ORDER (current contract):
THIS file owns every semantic color/radius/shadow/material value.
app.css no longer defines any color token (its legacy :root/dark blocks
were removed in Round 1; it keeps only layout values like --drivers-grid)
and only CONSUMES tokens. Pages therefore link tokens first, app second:
Because no token is defined twice, the order is not load-bearing — but
keep tokens-first as the convention so overrides in page CSS stay
predictable. Never reintroduce token definitions into app.css.
CONTRAST: every "text-grade" value below was computed with WCAG 2.1
relative-luminance math (scratchpad script, Node). Ratios are recorded
inline as [x.xx on surface-1 / y.yy on bg-canvas]. AA body-text target is
4.5:1. Tertiary text (--text-3) is intentionally sub-AA — see its comment.
========================================================================= */
:root {
/* Native form controls (selects, scrollbars, checkboxes) follow the theme */
color-scheme: light;
/* ------------------------------------------------------------------
TYPOGRAPHY (frozen)
------------------------------------------------------------------ */
--font-stack: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
/* ------------------------------------------------------------------
ACCENT / INTERACTION — Apple systemBlue
`--accent` is for FILLS, BORDERS, ICONS and large/bold labels only:
#007AFF on white is 4.02:1, which fails AA for small body text.
For any small text (links, active labels, chip text on tints) use
`--accent-text`. [#0062C4: 5.93 on #fff / 5.31 on #F2F2F7 /
5.22 on --accent-tint]
------------------------------------------------------------------ */
--accent: #007AFF;
--accent-hover: #0071E3; /* white-on-fill 4.70:1 — also the darkest "still Apple blue" hover */
--accent-pressed: #0064D2;
--accent-tint: rgba(0, 122, 255, .10); /* selected-row / active-chip fill */
--accent-tint-strong:rgba(0, 122, 255, .18); /* hover-on-selected, count bubbles */
--accent-border: rgba(0, 122, 255, .35); /* replaces #bfdbfe / #93c5fd pastel borders */
--accent-text: #0062C4; /* replaces #1d4ed8 text-on-tint (was 6.70) */
--text-on-accent: #FFFFFF; /* label color on solid accent fills */
/* SOLID TEXT-BEARING CONTROLS (Round 2) — `--accent` #007AFF is a display
color: white on it is 4.02:1 (3.65 in dark), an AA fail for the 10–16px
labels our buttons/segments actually carry. Any solid control with a
small white label MUST use this ladder instead (white-label ratios):
solid 4.70 · hover 5.59 · pressed 6.73. Same values serve both themes;
dark-surface affordance: #0071E3 vs surface-1 3.62, vs canvas 4.00. */
--accent-solid: #0071E3;
--accent-solid-hover: #0064D2;
--accent-solid-pressed: #0058BC;
/* ------------------------------------------------------------------
SEMANTIC STATUS — Apple palette for fills, darkened companions for text.
Raw Apple status colors are display colors, NOT text colors:
#34C759 on white = 2.22:1, #FF9500 = 2.20:1, #FF3B30 = 3.55:1.
Never put them under 18px/bold on light surfaces — use `-text` variants.
------------------------------------------------------------------ */
--success: #34C759; /* fills, dots, progress bars */
--success-tint: rgba(52, 199, 89, .12);
--success-border: rgba(52, 199, 89, .40);
--success-text: #177641; /* 5.67 / 5.08; 5.14 on --success-tint. Replaces #15803d (5.02) */
--success-strong: #177641; /* solid success-button fill: white label 5.67:1
(hoisted from admin.html's page-local copy) */
--warning: #FF9500;
--warning-tint: rgba(255, 149, 0, .14);
--warning-border: rgba(255, 149, 0, .45);
--warning-text: #8F4E00; /* 6.45 / 5.78; 5.75 on --warning-tint. Replaces #b45309 (5.02)
and fixes --amber-as-text (#d97706 was 3.19 — AA fail) */
--danger: #FF3B30;
--danger-tint: rgba(255, 59, 48, .10);
--danger-border: rgba(255, 59, 48, .40);
--danger-text: #C00F1E; /* 6.31 / 5.65; 5.51 on --danger-tint. Replaces #dc2626 (4.83) */
--danger-strong: #C41E25; /* solid destructive-button fill: white label = 5.90:1.
(white on raw #FF3B30 is 3.55 — bold/large only) */
/* Info = Apple systemTeal. Used for "in progress / FYI" accents that must
not read as the interaction blue. */
--info: #30B0C7;
--info-tint: rgba(48, 176, 199, .12);
--info-border: rgba(48, 176, 199, .45);
--info-text: #00708A; /* 5.70 / 5.11; 5.13 on --info-tint */
/* ------------------------------------------------------------------
NEUTRAL RAMP — Apple systemGray1–6 (light)
gray-1 is the darkest usable "solid gray", gray-6 the lightest fill.
------------------------------------------------------------------ */
--gray-1: #8E8E93;
--gray-2: #AEAEB2;
--gray-3: #C7C7CC;
--gray-4: #D1D1D6;
--gray-5: #E5E5EA;
--gray-6: #F2F2F7;
/* ------------------------------------------------------------------
SURFACES
bg-canvas deliberately equals Apple's grouped background (#F2F2F7) so
white cards (`--surface-1`) read as raised content — the exact
iOS/macOS "inset grouped" recipe. It replaces #f4f6f8 (near-identical
lightness, slightly more neutral).
------------------------------------------------------------------ */
--bg-canvas: #F2F2F7;
--surface-1: #FFFFFF; /* cards, panels, table bodies */
--surface-2: #F2F2F7; /* inset fills, toolbars, chips (replaces #f8fafc / #f1f5f9) */
--surface-3: #E5E5EA; /* deeper inset: pressed chips, meter tracks */
/* ------------------------------------------------------------------
TEXT — solid primary + alpha secondary/tertiary (Apple label style).
Alpha text composites correctly over any surface tier.
------------------------------------------------------------------ */
--text-1: #1D1D1F; /* 16.83 / 15.08 — replaces --ink #17202a */
--text-2: rgba(60, 60, 67, .75); /* 5.15 / 4.82 — replaces --ink2 #5d6978 (5.59).
Alpha raised from Apple's .60 (3.9:1 — AA fail):
13px dense dispatch text must stay AA. */
--text-3: rgba(60, 60, 67, .55); /* 3.02 / 2.92 — replaces --ink3 #8b97a6 (2.97).
INTENTIONALLY sub-AA: tertiary metadata only
(timestamps, unit suffixes). Never for
actionable or sole-source information. */
/* Interactive-muted (Round 2): quiet color for ACTIONABLE muted things —
close/clear buttons, icon buttons, secondary control labels. --text-3 is
sub-AA by policy and must never reach controls; this token is the
quietest value that still passes AA. Light cannot drop below .75 alpha
(.70 measures 4.46 — fail), so light equals --text-2 numerically; the
separate name keeps control usage safe if --text-2 is ever retuned.
[light 5.15 / 4.82 · dark 5.94 / 6.22] */
--control-muted: rgba(60, 60, 67, .75);
/* Separators — low-alpha so they layer over any surface (Apple style).
Alpha tuned BELOW Apple's .29: composited ≈ #D0D0D2 vs today's #d9dee5.
Full Apple weight reads too heavy on a 13px high-density table grid. */
--separator: rgba(60, 60, 67, .24); /* replaces --line #d9dee5 */
--separator-weak: rgba(60, 60, 67, .12); /* replaces --line2 #edf0f3 */
/* ------------------------------------------------------------------
RADIUS SCALE (visual-only; radius never affects layout)
Migration guide: 2–7px → --r-sm · 8–12px → --r-md · 13–16px → --r-lg
large overlays/sheets → --r-xl · pills/circles → --r-pill
------------------------------------------------------------------ */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-pill: 999px;
/* ------------------------------------------------------------------
SHADOWS — Apple-soft: low alpha, generous blur, minimal y-offset.
Kept on the cool axis rgba(16,24,40,…) to match the existing shadow
temperature (was rgba(15,23,42,…)).
------------------------------------------------------------------ */
--shadow-1: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04); /* rest state: cards, chips */
--shadow-2: 0 10px 30px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05); /* raised panels (≈ legacy --shadow) */
--shadow-3: 0 22px 60px rgba(16, 24, 40, .18), 0 4px 12px rgba(16, 24, 40, .07);/* floating overlays, popovers, dialogs */
/* ------------------------------------------------------------------
MATERIALS — pair with: backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
STATIC CHROME ONLY (top bar, sidebar, modal scrims/cards). Never on
live tables or the map (§8.2.5 performance red line). Always provide
an @supports fallback to a solid --surface-* color.
------------------------------------------------------------------ */
--material-chrome: rgba(247, 249, 251, .78); /* bars/sidebar glass (precedent: mobile sidebar rgba(245,247,250,.72)) */
--material-overlay: rgba(255, 255, 255, .72); /* popover & modal card glass */
--scrim: rgba(15, 23, 42, .42); /* dimming layer behind modals (matches legacy overlay dim) */
/* Focus ring — accent-based, non-layout (box-shadow, not outline-offset) */
--focus-ring: 0 0 0 3px rgba(0, 122, 255, .35);
/* ------------------------------------------------------------------
SECA BRAND — the dark navy sidebar is a brand element and stays navy
(§7.5: system blue must not erase the brand). Values only refined to
sit closer to the existing sidebar gradient top (#101c2a).
------------------------------------------------------------------ */
--brand-navy: #101B29; /* legacy --nav #0f1824 */
--brand-navy-2: #1C2836; /* legacy --nav2 #1b2635 */
/* ------------------------------------------------------------------
BUSINESS IDENTITY TOKENS — VALUES FROZEN (do-not-migrate list in
docs/DESIGN_TOKENS_MAP.md). Tokenized only so usages can centralize;
changing these hues changes business meaning — never "modernize" them.
------------------------------------------------------------------ */
/* DC identity (Day Plan swimlanes / dv-tabs): LA / DFW / MEM */
--dc-la-text: #0C447C; --dc-la-tint: #E6F1FB; --dc-la-border: #B5D4F4;
--dc-dfw-text: #0F6E56; --dc-dfw-tint: #E1F5EE; --dc-dfw-border: #9FE1CB;
--dc-mem-text: #3C3489; --dc-mem-tint: #EEEDFE; --dc-mem-border: #CECBF6;
/* Driver-duty chips (.fl-chip.*): hue = duty meaning, frozen */
--duty-moving-tint: #DBEAFE; --duty-moving-text: #1E40AF;
--duty-onduty-tint: #DCFCE7; --duty-onduty-text: #166534;
--duty-stopped-tint: #FEF3C7; --duty-stopped-text: #92400E;
--duty-off-tint: #F3F4F6; --duty-off-text: #6B7280;
--duty-unknown-tint: #FEE2E2; --duty-unknown-text: #991B1B;
}
/* ===========================================================================
DARK THEME — Apple elevated-dark palette
========================================================================= */
:root[data-theme="dark"] {
color-scheme: dark;
/* Accent — dark systemBlue. #0A84FF is text-safe on dark surfaces
(4.66 on #1C1C1E / 5.16 on canvas), unlike its light twin. */
--accent: #0A84FF;
--accent-hover: #3395FF;
--accent-pressed: #0070E0;
--accent-tint: rgba(10, 132, 255, .16);
--accent-tint-strong:rgba(10, 132, 255, .26);
--accent-border: rgba(10, 132, 255, .48);
--accent-text: #64A8FF; /* 6.96 / 7.69; 5.74 on --accent-tint.
Replaces dark-mode #9ec5ff / #93c5fd */
--text-on-accent: #FFFFFF;
/* Solid text-bearing controls — same measured ladder as light (white
label 4.70/5.59/6.73; dark #0A84FF would be 3.65 — AA fail). Fill
affordance vs surface-1 3.62 / canvas 4.00, both ≥3:1. Hover darkens
(keeps label AA); do not swap in the brighter dark accent here. */
--accent-solid: #0071E3;
--accent-solid-hover: #0064D2;
--accent-solid-pressed: #0058BC;
/* Status — dark variants are bright enough to BE text on dark surfaces
(ratios on #1C1C1E / #0D1218): green 8.42/9.30, orange 8.28/9.15,
teal 8.55/9.45. Red is the exception: #FF453A is 4.99 (passes, thin
margin), so --danger-text lifts to #FF6961 (6.03; 5.16 on tint). */
--success: #30D158;
--success-tint: rgba(48, 209, 88, .14);
--success-border: rgba(48, 209, 88, .45);
--success-text: #30D158;
--success-strong: #1B8347; /* white label 4.79:1; fill vs surface-1 3.55
(#177641 would sit at exactly 3.00 — too thin) */
--warning: #FF9F0A;
--warning-tint: rgba(255, 159, 10, .14);
--warning-border: rgba(255, 159, 10, .45);
--warning-text: #FF9F0A;
--danger: #FF453A;
--danger-tint: rgba(255, 69, 58, .14);
--danger-border: rgba(255, 69, 58, .48);
--danger-text: #FF6961;
--danger-strong: #D70015; /* white label = 5.38:1 */
--info: #40C8E0;
--info-tint: rgba(64, 200, 224, .14);
--info-border: rgba(64, 200, 224, .48);
--info-text: #40C8E0;
/* Neutral ramp — Apple systemGray1–6 (dark). Note gray-6 == surface-1. */
--gray-1: #8E8E93;
--gray-2: #636366;
--gray-3: #48484A;
--gray-4: #3A3A3C;
--gray-5: #2C2C2E;
--gray-6: #1C1C1E;
/* Surfaces — Apple elevated-dark tiers. Canvas is #0D1117-adjacent but
nudged to #0D1218: it keeps the app's existing cool-navy cast (today's
#0f141a) so the SECA navy sidebar still harmonizes, and it sits well
below --surface-1 so elevated cards visibly float. */
--bg-canvas: #0D1218;
--surface-1: #1C1C1E; /* replaces dark --panel #161c24 */
--surface-2: #2C2C2E; /* replaces dark --panel2 #1b222c */
--surface-3: #3A3A3C;
/* Text — ratios on #1C1C1E / #0D1218 */
--text-1: #F5F5F7; /* 15.63 / 17.27 — replaces dark --ink #e6edf3 */
--text-2: rgba(235, 235, 245, .68); /* 7.28 / 7.74 — replaces #aab4c0 */
--text-3: rgba(235, 235, 245, .45); /* 3.93 / 4.02 — tertiary metadata only (same
sub-AA policy as light; ≈ legacy #7d8896) */
--control-muted: rgba(235, 235, 245, .60); /* actionable-muted: 5.94 / 6.22 */
/* Separators — Apple dark separator, alpha tuned down from .65 for the
dense grid (composited ≈ #39393C on surface-1 vs legacy #2a323d). */
--separator: rgba(84, 84, 88, .52);
--separator-weak: rgba(84, 84, 88, .28);
/* Shadows — dark mode needs stronger, tighter blackness to separate
elevated tiers (surfaces are close in luminance). */
--shadow-1: 0 1px 4px rgba(0, 0, 0, .40);
--shadow-2: 0 12px 32px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .30); /* ≈ legacy dark --shadow */
--shadow-3: 0 24px 64px rgba(0, 0, 0, .60), 0 4px 12px rgba(0, 0, 0, .35);
/* Materials — same static-chrome-only rule as light */
--material-chrome: rgba(24, 27, 32, .78);
--material-overlay: rgba(38, 40, 46, .72);
--scrim: rgba(0, 0, 0, .55);
--focus-ring: 0 0 0 3px rgba(10, 132, 255, .45);
/* Brand navy is a dark element already; unchanged in dark theme. */
--brand-navy: #101B29;
--brand-navy-2: #1C2836;
}
/* ===========================================================================
LEGACY ALIAS BLOCK — compatibility bridge (TEMPORARY)
---------------------------------------------------------------------------
Re-points the pre-existing token names (still consumed ~900× in app.css)
at the semantic layer. Every alias resolves through var(), so dark values
flip automatically when [data-theme="dark"] redefines the semantic tokens
— no dark re-declaration of the aliases is needed (app.css defines none of
these names anymore).
POLICY: aliases exist only so Round 1 didn't have to rewrite ~900 usages.
NEW work must use the semantic names directly (--surface-*, --text-*,
--accent-*, --separator*); do not add new var(--ink)/var(--panel)/… reads.
The aliases will be retired once app.css usages are migrated batch-wise.
Alias decisions (full rationale in docs/DESIGN_TOKENS_MAP.md §3):
- --blue → --accent-text, NOT --accent: 17 of 22 var(--blue) usages are
small text; raw #007AFF (4.02:1) would fail AA there. The few fill/border
usages get a slightly deeper blue — acceptable, still unmistakably blue.
- --green/--amber/--red → the -text variants for the same reason (they are
text in 6/6, 13/15 and 1/1 of their var() usages respectively). This
FIXES a live AA failure: --amber #d97706 as text was 3.19:1.
- --nav/--nav2 → brand navy kept (currently unconsumed in app.css but
defended for JS/inline readers). Sidebar stays a dark navy brand element.
- --slate is unconsumed in extracted CSS; aliased to --text-2 defensively.
- --drivers-grid is LAYOUT and is intentionally ABSENT from this file.
========================================================================= */
:root {
--bg: var(--bg-canvas);
--panel: var(--surface-1);
--panel2: var(--surface-2);
--line: var(--separator);
--line2: var(--separator-weak);
--ink: var(--text-1);
--ink2: var(--text-2);
--ink3: var(--text-3);
--blue: var(--accent-text);
--green: var(--success-text);
--amber: var(--warning-text);
--red: var(--danger-text);
--slate: var(--text-2);
--nav: var(--brand-navy);
--nav2: var(--brand-navy-2);
--shadow: var(--shadow-2);
}
/* (The former dark re-declaration of these aliases was removed in Round 2:
app.css no longer hardcodes the legacy names, so the single alias block
above flips with the theme through var() resolution automatically.) */
/* ===========================================================================
THEME BOOTSTRAP — token-only pages (Round 2)
---------------------------------------------------------------------------
One shared mechanism for the six secondary pages; the dark palette exists
ONLY in this file (no page-local copies).
- Main app (index.html): its settings JS stamps data-theme="light|dark"
explicitly. An explicit choice always wins; nothing here overrides it.
- Token-only public pages: mark the document and
include /theme-boot.js in (before stylesheets paint). The script
resolves "auto" to "dark" when the OS prefers dark, keeps following OS
changes live, and touches nothing when data-theme is not "auto".
- color-scheme above keeps native selects/scrollbars in step both ways.
========================================================================= */
/* Reduced motion (Round 2 §B): collapse decorative transitions/animations for
users who request it. Scoped to duration so JS animation hooks still fire. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}