/* ============================================================================= ProDispatch Modern — TOKEN LAYER Charlotte Metro Towing & Roadside Assistance Source of truth: 00. MD FILES/SPECS/07_DESIGN_SYSTEM.md Load order (required): 1. towing-tokens.css <- this file (custom properties + @font-face only) 2. towing-ui.css <- component layer 3. towing-admin.css <- operator-density overrides Dark-only system. There is no light theme; :root IS dark (doc 07 §9.8). No Tailwind, no build step, no CDN. Plain CSS for shared hosting. ============================================================================= */ /* ============================================================================= 1. SELF-HOSTED FONT FACES Drop the WOFF2 files listed in assets/fonts/README.md next to this path. Never re-add the Google Fonts : emergency-services UI must survive a third-party outage, and Google Fonts is a GDPR exposure. (doc 07 §2.2) ============================================================================= */ /* --- Manrope (variable 200..800; we render 600/700/800) — display + headlines */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('../fonts/manrope-latin-var.woff2') format('woff2-variations'), url('../fonts/manrope-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Inter (variable 100..900; we render 400/500/600/700) — body + label-caps */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin-var.woff2') format('woff2-variations'), url('../fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- JetBrains Mono 500 — every identifier, plate, clock and money figure */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; } /* --- Material Symbols Outlined (variable, FILL/wght/GRAD/opsz). Subset to the 69 glyphs listed in assets/fonts/README.md (+2 additions). */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 100 700; font-display: block; /* block, not swap: ligature fallback text would leak the literal glyph name ("local_shipping") on screen */ src: url('../fonts/material-symbols-outlined-subset.woff2') format('woff2-variations'), url('../fonts/material-symbols-outlined-subset.woff2') format('woff2'); } /* ============================================================================= 2. DESIGN TOKENS ============================================================================= */ :root { color-scheme: dark; /* A missing weight must never be faked — the amber CTAs depend on the real 700/800 cuts, and synthetic bold destroys the mono column alignment. */ font-synthesis: none; -webkit-font-synthesis: none; /* --------------------------------------------------------------------------- 2.1 SURFACES / NEUTRALS (Material-3 tonal ladder) --------------------------------------------------------------------------- */ --surface: #0C0F14; /* asphalt canvas */ --surface-dim: #090B0F; /* deepest asphalt */ --surface-bright: #2B333F; /* raised / segmented "on" */ --surface-container-lowest: #070910; /* table footers, deepest wells */ --surface-container-low: #11151C; /* sidebar background */ --surface-container: #151A22; /* inset wells, top bars, rows */ --surface-container-high: #1D242E; /* hovered rows, sticky head */ --surface-container-highest: #263040; /* mobile bottom nav */ --surface-variant: #263040; /* chip fill, avatar, scrollbar */ --surface-card: #131820; /* THE card colour — Level-1 */ --background: #0C0F14; --inverse-surface: #e5e2e1; --inverse-on-surface: #313030; /* --------------------------------------------------------------------------- 2.2 TEXT / STROKE --------------------------------------------------------------------------- */ --on-surface: #EEF2F7; /* primary text (16.1:1 on bg) */ --on-surface-variant: #A7B2C2; /* secondary text (8.4:1 on bg) */ --on-background: #e5e2e1; --outline: #6B7789; /* strong border, muted icon */ --outline-variant: #333E4D; /* default 1px divider — 1.9:1 on card, visible */ /* --------------------------------------------------------------------------- 2.3 PRIMARY — Midnight-Navy family --------------------------------------------------------------------------- */ --primary: #7FB4FF; /* links, IDs, nav accents */ --on-primary: #04203F; --primary-container: #123055; /* driver "Mark En Route" fill */ --on-primary-container: #CFE2FF; /* AA on primary-container */ --inverse-primary: #4e5f7e; --primary-fixed: #D6E6FF; --primary-fixed-dim: #7FB4FF; --on-primary-fixed: #031A33; --on-primary-fixed-variant: #27466E; --surface-tint: #7FB4FF; /* --------------------------------------------------------------------------- 2.4 SECONDARY — Safety Amber (the action colour) --------------------------------------------------------------------------- */ --secondary: #FF6B1F; /* PRIMARY BUTTON FILL — safety orange */ --on-secondary: #160800; /* text on orange (7.6:1) */ --secondary-container: #FF7A33; /* ACTIVE nav item fill */ --on-secondary-container: #160800; /* near-black on orange */ --secondary-fixed: #FF8442; /* button :hover fill */ --secondary-fixed-dim: #E2540E; /* button :active fill */ --on-secondary-fixed: #160800; --on-secondary-fixed-variant: #4A1B00; /* --------------------------------------------------------------------------- 2.5 TERTIARY --------------------------------------------------------------------------- */ --tertiary: #9DC3FF; --on-tertiary: #092f62; --tertiary-container: #0B2A50; --on-tertiary-container: #7593cb; --tertiary-fixed: #D6E6FF; --tertiary-fixed-dim: #9DC3FF; --on-tertiary-fixed: #001b3f; --on-tertiary-fixed-variant: #27467a; /* --------------------------------------------------------------------------- 2.6 ERROR (M3 role — distinct from --status-critical) --------------------------------------------------------------------------- */ --error: #FF9A93; /* error text (8.9:1 on bg) */ --on-error: #690005; --error-container: #93000a; --on-error-container: #ffdad6; /* --------------------------------------------------------------------------- 2.7 FUNCTIONAL STATUS --------------------------------------------------------------------------- */ --status-success: #2D6A4F; /* FILLS / BORDERS ONLY — never text */ --status-warning: #FFB020; /* SLA approaching — beacon amber */ --status-critical: #DC2626; /* SLA breach, payment fail, SOS */ /* --------------------------------------------------------------------------- 2.8 MAP --------------------------------------------------------------------------- */ --map-driver-internal: #3B82F6; /* own fleet, blue glow */ --map-driver-vendor: #8B5CF6; /* partner vendor, purple glow */ /* =========================================================================== 2.9 PROMOTED LITERALS Hard-coded in the mockup markup, absent from DESIGN.md. doc 07 §1.2 promotes them to first-class tokens. =========================================================================== */ --surface-card-literal: #131820; /* alias — the card colour */ --input-bg: #0A0D12; /* darker than --surface; every field */ --status-success-text: #4ade80; /* 9.56:1 on card. #2D6A4F as text is 2.58:1 and effectively invisible. RULE: -success = fill/border, -success-text = glyphs. */ --hairline: rgba(255,255,255,.10); /* border-white/10 */ --hairline-faint: rgba(255,255,255,.05); /* border-white/5 */ --glass-bg: color-mix(in srgb, var(--surface-card) 72%, transparent); --glass-bg-fallback: #1E1E1EF2; --glass-blur: 12px; --scrim: rgba(0,0,0,.50); /* =========================================================================== 2.10 ACCESSIBILITY-CORRECTED TOKENS Every value here replaces a measured WCAG 2.2 AA failure catalogued in doc 07 §10.1. The original mockup value, the measured ratio and the replacement are recorded on each line. Do not "restore" these. =========================================================================== */ /* A1 — Emergency SOS / critical buttons. WAS: --on-error #690005 on --status-critical #DC2626 = 2.71:1 FAIL WAS: --on-primary #20304e on --status-critical = 2.73:1 FAIL NOW: #ffffff on #DC2626 = 4.83:1 PASS AA */ --on-status-critical: #ffffff; --status-critical-hover: #B91C1C; /* 6.29:1 with #fff — hover only */ /* A2 — success as TEXT. WAS: --status-success #2D6A4F on --surface-card = 2.58:1 FAIL NOW: --status-success-text #4ade80 on --surface-card = 9.56:1 PASS AAA */ /* (token defined above as --status-success-text) */ /* A3 — critical as TEXT (ghost SOS, "Missing" chip, SLA clock). WAS: --status-critical #DC2626 on --surface at 12px = 3.85:1 FAIL WAS: --status-critical #DC2626 on its own 15% tint = 3.10:1 FAIL NOW: --error #ffb4ab on the 15% critical tint = 8.83:1 PASS AAA The ghost SOS *button* is not fixed by a colour swap — doc 07 says the panic button must be solid red + white text. .tw-btn--critical is solid. */ --status-critical-text: #ffb4ab; /* A4 — disabled primary button. WAS: bg-secondary/50 + text-on-secondary/50 = 3.40:1 NOW: --surface-variant fill + --outline text = 3.93:1 (disabled controls are exempt from 1.4.3, but 3.4:1 read as "muddy tan still enabled" in the PNG; this reads unambiguously inert.) */ --disabled-bg: #353534; --disabled-fg: #8f9098; --disabled-border: #44474d; /* A5 — active sidebar item. WAS: --on-secondary-container #6b4b00 on #feb700 = 4.56:1 marginal NOW: --on-secondary-fixed #271900 on #feb700 = 9.71:1 PASS AAA */ --nav-active-bg: var(--secondary-container); --nav-active-fg: var(--on-secondary); /* dark text on safety orange */ /* A6 — "Save Rules" / "Mark En Route" filled-tonal button. WAS: --on-primary-container #8293b5 on #1a2b48 = 4.58:1 reads as disabled NOW: --primary-fixed #d7e2ff on #1a2b48 = 10.82:1 PASS AAA */ --on-primary-container-text: #d7e2ff; /* A7 — vendor wizard fields rendered WHITE (theme() dropped by the Play CDN). A8 — success page rendered on a WHITE body (same root cause). Not colour swaps: both are build-system bugs. Fixed structurally by this stylesheet — plain custom properties, no theme(), and .tw-input / .tw-page set their own background explicitly so no UA default can win. */ /* Focus ring — doc 07 §10.4: the single worst defect in the mockup set is that outline:none is set everywhere and no :focus-visible style exists in any of the 12 files. This ring is mandatory and global. */ --focus-ring-color: var(--secondary); /* Safety Amber */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-inset-offset: -2px; /* rows / nav items / tabs */ --focus-ring-on-amber: var(--on-secondary); /* dark ring when the surface IS amber*/ /* --------------------------------------------------------------------------- 2.11 RADII — HTML-config scale (authoritative). doc 07 §1.1: DESIGN.md's frontmatter scale is one step larger at every name. All 12 mockups were authored against THIS scale. The trap is DEFAULT: `rounded` = 4px, not 8px. --------------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px — capability micro-tags */ --radius: 0.25rem; /* 4px — Tailwind `rounded` DEFAULT. NOTE: 4px. */ --radius-md: 0.375rem; /* 6px — vendor form inputs (normalise to lg) */ --radius-lg: 0.5rem; /* 8px — DEFAULT COMPONENT RADIUS */ --radius-xl: 0.75rem; /* 12px — panels, bento cards, drop zone, sheet top */ --radius-2xl: 1rem; /* 16px — large easy-service cards */ --radius-full: 9999px; /* pills, chips, avatars, FABs, progress */ /* --------------------------------------------------------------------------- 2.12 SPACING --------------------------------------------------------------------------- */ --touch-target-min: 48px; /* hard floor for every interactive element */ --gutter: 1.5rem; /* 24px — panel padding, table cell x-padding */ --margin-mobile: 1rem; /* 16px — page inset < 768px */ --margin-desktop: 2rem; /* 32px — page inset >= 768px */ --stack-xs: 0.25rem;/* 4px */ --stack-sm: 0.5rem; /* 8px */ --stack-md: 1rem; /* 16px */ --stack-lg: 2rem; /* 32px */ --space-3: 0.75rem;/* 12px — ad-hoc value present in markup */ --space-5: 1.25rem;/* 20px — ad-hoc value present in markup */ /* Page inset resolves per breakpoint in towing-ui.css §Base. */ --page-inset: var(--margin-mobile); /* --------------------------------------------------------------------------- 2.13 TYPE FAMILIES --------------------------------------------------------------------------- */ --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-icon: 'Material Symbols Outlined'; /* --------------------------------------------------------------------------- 2.14 TYPE SCALE — 8 roles, the whole system --------------------------------------------------------------------------- */ --display-lg-size: 48px; --display-lg-lh: 56px; --display-lg-w: 800; --display-lg-ls: -0.02em; --headline-lg-size: 32px; --headline-lg-lh: 40px; --headline-lg-w: 700; --headline-lg-ls: 0; --headline-lg-mobile-size: 24px; --headline-lg-mobile-lh: 32px; --headline-lg-mobile-w: 700; --headline-md-size: 24px; --headline-md-lh: 32px; --headline-md-w: 600; --headline-md-ls: 0; --body-lg-size: 18px; --body-lg-lh: 28px; --body-lg-w: 400; --body-md-size: 16px; --body-md-lh: 24px; --body-md-w: 400; --body-sm-size: 14px; --body-sm-lh: 20px; --body-sm-w: 400; --data-mono-size: 14px; --data-mono-lh: 20px; --data-mono-w: 500; --data-mono-ls: 0.02em; --label-caps-size: 12px; --label-caps-lh: 16px; --label-caps-w: 700; --label-caps-ls: 0.05em; /* Formalised from the repeated `font-headline-md text-[16px]` in the markup (doc 07 §4.6): the button/tab label role. Manrope 600 16/24. */ --label-btn-size: 16px; --label-btn-lh: 24px; --label-btn-w: 600; /* --------------------------------------------------------------------------- 2.15 ELEVATION / SHADOW / GLOW --------------------------------------------------------------------------- */ --shadow-amber: 0 4px 14px 0 color-mix(in srgb, var(--secondary) 22%, transparent); --shadow-amber-soft: 0 4px 14px 0 color-mix(in srgb, var(--secondary) 16%, transparent); --shadow-amber-glow: 0 0 15px color-mix(in srgb, var(--secondary) 22%, transparent); --shadow-critical: 0 4px 14px 0 rgba(220,38,38,.39); --shadow-critical-soft: 0 0 15px rgba(220,38,38,.20); --shadow-sheet: 0 -10px 40px rgba(0,0,0,.50); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 4px 10px rgba(0,0,0,.40); --shadow-lg: 0 10px 24px rgba(0,0,0,.45); --shadow-2xl: 0 24px 60px rgba(0,0,0,.60); --glow-driver-internal: 0 0 15px 5px rgba(59,130,246,.40); --glow-driver-vendor: 0 0 15px 5px rgba(139,92,246,.40); --glow-zone-amber: 0 0 8px var(--secondary); --glow-zone-vendor: 0 0 8px #8B5CF6; /* --------------------------------------------------------------------------- 2.16 MOTION --------------------------------------------------------------------------- */ --dur-fast: 150ms; /* icon / colour hovers */ --dur-base: 200ms; /* the default transition-colors duration in markup */ --dur-slow: 300ms; /* wizard slide-in, slide-over translate */ --dur-image: 500ms; /* bento image opacity on hover */ --dur-pulse: 2000ms; /* live map marker loop */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --press-scale: 0.95; /* driver / nav controls */ --press-scale-soft: 0.98; /* customer / admin controls */ /* --------------------------------------------------------------------------- 2.17 LAYOUT CONSTANTS --------------------------------------------------------------------------- */ --sidebar-w: 256px; /* every admin / operator screen */ --sidebar-drawer-w: 300px; /* off-canvas drawer max width < md */ --queue-w: 400px; /* operator job queue at >= 1280px */ --queue-w-compact: 360px; /* 1024–1280px: 400px starves the map (doc §4.4) */ --context-panel-w: 400px; --context-panel-w-xl: 480px; --topbar-h: 64px; /* public + customer + vendor shells */ --appbar-h: 80px; /* admin shells (title + subtitle) */ --bottomnav-h: 64px; --form-control-h: 56px; /* customer wizard buttons */ --content-max: 1280px; /* landing */ --form-max: 896px; /* vendor wizard */ --panel-max: 768px; /* documents / complete */ --mobile-flow-max: 448px; /* customer request flow */ --sheet-max-h: 40vh; /* operator bottom context panel */ /* Safe-area helpers (`pb-safe` is not a real Tailwind class — doc 07 §9.4). */ --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* --------------------------------------------------------------------------- 2.18 Z-INDEX LADDER (derived from the mockups' ad-hoc z-0..z-50) --------------------------------------------------------------------------- */ --z-map: 0; --z-map-ui: 10; --z-sticky: 20; --z-sidebar: 30; --z-topbar: 40; --z-bottomnav: 50; --z-scrim: 55; --z-slideover: 56; --z-modal: 60; --z-toast: 70; --z-skiplink: 80; /* ========================================================================== BRAND DEVICE + MOTION (added 2026-08-11) -------------------------------------------------------------------------- The palette is asphalt + safety orange + signal blue. Warm gold was removed: it reads hospitality, not roadside recovery. The chevron is the brand device — the reflective striping on the back of a recovery truck. Used as a thin accent edge, never as wallpaper. ========================================================================== */ /* Hi-vis reflective chevron, 45deg. Applied to a 4-6px strip. */ --chevron: repeating-linear-gradient( 135deg, #FF6B1F 0 14px, #0C0F14 14px 28px ); --chevron-soft: repeating-linear-gradient( 135deg, rgba(255,107,31,.85) 0 10px, rgba(12,15,20,.85) 10px 20px ); /* Amber beacon glow — warnings and live/urgent states only. */ --beacon-glow: 0 0 0 1px rgba(255,176,32,.35), 0 0 24px -4px rgba(255,176,32,.45); --action-glow: 0 8px 24px -10px rgba(255,107,31,.65); /* Depth. Asphalt at night: shadows are deep and cool, never soft grey. */ --elev-1: 0 1px 2px rgba(0,0,0,.4); --elev-2: 0 4px 12px -2px rgba(0,0,0,.5); --elev-3: 0 16px 40px -12px rgba(0,0,0,.65); /* ---- Motion ------------------------------------------------------------- The built-in CSS easings are too weak to feel intentional. These are the strong variants. ease-in is deliberately absent: it delays the first frame, which is exactly when the user is looking. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 140ms; /* button feedback */ --dur-tooltip: 160ms; /* tooltips, small popovers */ --dur-menu: 200ms; /* dropdowns, selects */ --dur-panel: 260ms; /* modals, drawers, slide-overs */ } /* ============================================================================= 3. BREAKPOINT-RESOLVED TOKENS Page inset and panel widths are tokens, not media-query one-offs, so every component can read one variable. Bands per doc 07 §6. ============================================================================= */ @media (min-width: 768px) { :root { --page-inset: var(--margin-desktop); } } @media (min-width: 1024px) and (max-width: 1279.98px) { :root { --queue-w: var(--queue-w-compact); } } @media (min-width: 1280px) { :root { --context-panel-w: var(--context-panel-w-xl); } } /* ============================================================================= 4. HIGH-CONTRAST PREFERENCE (doc 07 §10.6) Swap hairlines for a real outline and promote every /15–/30 tinted fill to a solid surface. Tokens only — components inherit it for free. ============================================================================= */ @media (prefers-contrast: more) { :root { --hairline: #8f9098; --hairline-faint: #44474d; --outline-variant: #8f9098; --on-surface-variant: #e5e2e1; --glass-bg: #1E1E1E; --glass-blur: 0px; --focus-ring-width: 3px; } }