/* ══════════════════════════════════════════════════════════════════════════════ APL BAY — design tokens SOURCE OF TRUTH: driver_portal/templates/driver_portal/base.html. Every colour below is lifted verbatim from the driver app, because the owner's instruction is that the bay tablet must look like the driver app. Do not round, re-pick or "improve" these — they are the same product. WHAT DELIBERATELY DIFFERS: the SIZING, and only the sizing. A phone in a hand is ~30cm away. An iPad on a bay stand is ~60cm, read through safety glasses by someone wearing gloves. So body type is 17px against the driver app's 15px, the floor is 15px, and hit targets are 56/72px against 44px. Copying the driver app's metrics here would be copying the wrong half. ══════════════════════════════════════════════════════════════════════════════ */ /* The light palette is bound to BOTH :root and [data-theme="light"] so a subtree can be returned to light values while nested inside a dark tree — used for the header band, the one place the brand mark has to sit on a light surface. */ :root, [data-theme="light"] { /* ── surfaces ─────────────────────────────────────────────── */ --bg: #F4F6F9; --surface: #FFFFFF; --surface-alt: #F8FAFC; --surface-raised: #FFFFFF; --border: #E2E8F0; --border-strong: #CBD5E1; /* --border-strong is a DIVIDER — 1.48:1 on white, correct for separating rows inside a card and far too faint to bound a control. A control sitting directly on --surface needs an edge a gloved hand can find, so it gets its own token measured to clear 3:1 against the surface it sits on. Verbatim from the design's tokens.css; it was missed when this file was copied on 2026-08-27. */ --ctl-edge: #85929F; /* ── text ramp ────────────────────────────────────────────── */ --text: #111827; --text-body: #374151; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-faint: #D1D5DB; /* ── brand + semantic ─────────────────────────────────────── */ --primary: #3730a3; --primary-light: #283593; --on-primary: #FFFFFF; /* text on a --primary fill */ --on-success: #FFFFFF; /* text on a --success fill */ --primary-bg: rgba(26,35,126,0.06); --success: #2E7D32; --success-bg: rgba(46,125,50,0.08); --danger: #C62828; --danger-bg: rgba(198,40,40,0.06); --warning: #E65100; --warning-bg: rgba(230,81,0,0.08); --accent: #B8860B; --accent-bg: rgba(184,134,11,0.10); /* ── on-surface TEXT variants ────────────────────────────────── --accent and --warning above are the driver portal's FILL colours and stay verbatim: spines, dots, rings, backgrounds. As TEXT on a near-white surface they measure 3.25:1 and 3.79:1, and the status word is the one element the brief makes load-bearing — colour AND a word, surviving glare and grayscale. These are the same hues carried down to clear 4.5:1. Use them for status words and meta copy. */ /* My Trucks card grid — the mechanic picks density on Me; JS overrides these. */ --card-min: 330px; --card-pad-y: 16px; --card-pad-x: 18px; --card-gap: 16px; --zone-header: 54px; --zone-band: 46px; --zone-pres: 44px; --zone-prog: 38px; --row-pad-y: 11px; --row-gap: 7px; --row-btn-pad: 18px; /* not a color/size: switches the task-row button between label-width and square */ --row-btn-w: auto; /* @kind other */ --row-badge: 32px; /* not a color/size: task-row meta wraps, or stays one line at cozy */ --row-meta-ws: normal; /* @kind other */ --accent-text: #7A5800; --warning-text: #B23F00; --primary-text: #3730a3; /* 8.9:1 on the tinted chip — the fill reads as text here */ --danger-text: #C62828; --success-text: #1E5E22; /* --success as text on --success-bg is 4.4:1; this is 6.8:1 */ --text-quiet: #596270; /* the muted ramp, but legible: 5.6:1 on --surface-alt */ /* ── elevation ──────────────────────────────────────────────── Depth comes from LAYERED, INDIGO-TINTED shadow rather than a hairline border. A 1px #E2E8F0 rule on white is 1.15:1 — at 60cm under shop lighting it is not a boundary, it is a rumour. Cards now carry shadow and drop the border; the tint ties the elevation to the brand instead of reading as generic grey blur. */ --card-shadow: 0 1px 2px rgba(17,24,39,.04), 0 6px 16px -4px rgba(55,48,163,.10); --card-shadow-lg: 0 2px 4px rgba(17,24,39,.05), 0 16px 32px -8px rgba(55,48,163,.18); --card-shadow-up: 0 -6px 20px -6px rgba(55,48,163,.16); /* the pinned timer */ /* ── chrome ───────────────────────────────────────────────── */ --header-bg: #FFFFFF; --header-border: #E5E7EB; --nav-bg: #FFFFFF; --nav-border: #E5E7EB; --nav-active: #3730a3; --nav-inactive: #9CA3AF; /* ── BAY SIZING — the one deliberate divergence ───────────── */ --t-body: 17px; /* driver app: 15px */ --t-floor: 15px; /* nothing renders below this */ --t-unit: 26px; /* a unit number, matched to the door of the truck */ --tap: 56px; /* driver app: 44px */ --tap-lg: 72px; /* primary action */ --nav-h: 64px; /* driver app: 60px */ --timer-h: 72px; /* the pinned timer — always reachable, never under a menu */ /* Softer geometry reads current; 12px on a 1180px tablet reads like a 2019 web app. */ --radius: 16px; /* cards */ --radius-ctl: 12px; /* buttons, inputs, chips */ --radius-sm: 9px; /* checkboxes, small tags */ --safe-b: env(safe-area-inset-bottom, 0px); --f-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* @kind font */ /* Every NUMBER uses this — unit numbers, clocks, counts. It is what stops the app reading as a document. Resolves to SF Mono on iPadOS: no webfont. */ --f-num: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* @kind font */ } [data-theme="dark"] { --bg: #0F1419; --surface: #1A2332; --surface-alt: #1E2A3A; --surface-raised: #243347; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.15); --ctl-edge: #6A7688; --text: #E8ECF1; --text-body: #C9D1D9; --text-secondary: #8B949E; --text-muted: #6E7681; --text-faint: #3D444D; --primary: #7986CB; --primary-light: #9FA8DA; /* Dark's primary and success are LIGHT fills — white on them is ~2.5:1. Ink instead. */ --on-primary: #131A2B; --on-success: #0F2412; --primary-bg: rgba(121,134,203,0.12); --success: #66BB6A; --success-bg: rgba(102,187,106,0.12); --danger: #EF5350; --danger-bg: rgba(239,83,80,0.1); --warning: #FFA726; --warning-bg: rgba(255,167,38,0.14); --accent: #FFD700; --accent-bg: rgba(255,215,0,0.14); /* Dark inverts the problem: the fills are already light enough to read as text. Only the quiet ramp needs lifting — --text-muted on --surface-alt is 3.16:1. */ --accent-text: #FFD700; --warning-text: #FFA726; /* Dark's primary and danger sit at 3.9:1 and 4.1:1 once the chip tint is composited over the card, so the status word gets a lighter step of the same hue. */ --primary-text: #AAB4E8; --danger-text: #FF8A85; --success-text: #66BB6A; /* dark's success fill already reads as text */ --text-quiet: #97A1AB; /* Dark: shadow alone cannot separate a #1A2332 card from a #0F1419 ground, so here the border does the work and the shadow only anchors. The reverse of the light theme. */ --card-shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.5); --card-shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 18px 36px -10px rgba(0,0,0,.65); --card-shadow-up: 0 -8px 24px -8px rgba(0,0,0,.6); --header-bg: #161D27; --header-border: rgba(255,255,255,0.06); --nav-bg: #161D27; --nav-border: rgba(255,255,255,0.06); --nav-active: #E8ECF1; --nav-inactive: #6E7681; } /* ⚠️ THE LOGO IS NEVER RECOLOURED. It keeps its own colours in both themes — the driver app filters it nowhere, and repainting a brand mark is not a design fix. */