/* ========================================================================== Diesel Pro — Color Schema Project Knight / Knight Transportation Brand red sampled live from knighttrans.com CTA buttons: rgb(178,8,56) Generated 2026-07-17 ========================================================================== */ :root { /* Neutrals */ --dp-white: #FFFFFF; --dp-gray-50: #F4F5F6; /* panels, table stripes, sidebar bg */ --dp-gray-100: #E8E9EB; /* borders, dividers, hover states */ --dp-gray-400: #9CA3AF; /* placeholder text, disabled icons */ --dp-gray-500: #6B7280; /* secondary text */ --dp-gray-600: #777777; /* Knight footer gray, muted labels */ --dp-black: #1A1A1A; /* headings, primary text */ --dp-black-soft: #333333; /* Knight header text color */ /* Brand */ --dp-red: #B20838; /* Knight Transportation CTA red (sampled live) */ --dp-red-hover: #93062E; /* ~15% darker, for hover/active */ --dp-red-tint: #FCEBF0; /* very light red for subtle badges/alerts bg */ /* Status green -- 2026-07-24: promoted from a literal #1e8e3e/#f2faf4 hardcoded at 6+ call sites (team cards, status pills, table row tints) to a real variable, same treatment as --dp-red already got. Needed for dark mode to be able to recolor these consistently from one place instead of missing call sites. */ --dp-green: #1e8e3e; --dp-green-tint: #f2faf4; /* Semantic */ --dp-bg-page: var(--dp-white); --dp-bg-panel: var(--dp-gray-50); --dp-border: var(--dp-gray-100); --dp-text-primary: var(--dp-black); --dp-text-secondary: var(--dp-gray-500); --dp-text-on-red: var(--dp-white); /* Buttons */ --dp-btn-primary-bg: var(--dp-red); --dp-btn-primary-bg-hover: var(--dp-red-hover); --dp-btn-primary-text: var(--dp-white); --dp-btn-secondary-bg: var(--dp-white); --dp-btn-secondary-border: var(--dp-gray-100); --dp-btn-secondary-text: var(--dp-black); --dp-btn-secondary-bg-hover: var(--dp-gray-50); --dp-btn-danger-bg: var(--dp-red); --dp-btn-danger-text: var(--dp-white); /* Dedicated danger-red -- 2026-07-24: distinct from --dp-red (brand CTA red), used for destructive actions (Retire, Break Pairing, etc.) in the legacy .rwp-driver-view component. Promoted from a literal #8a1414 so dark mode can recolor it too. */ --dp-danger-red: #8a1414; /* Load-status badge colors (rwp-driver-view .status-completed/-created), promoted from literal tints so dark mode has a hook to recolor them. */ --dp-status-completed-bg: #E3F5EA; --dp-status-completed-text: #1e7d42; --dp-status-created-bg: #FFF3DC; --dp-status-created-text: #a3690a; /* Attention/focus accent — light mode keeps the brand red (unchanged behavior). Dark mode overrides this to House Steel amber. */ --dp-focus: #B20838; --dp-focus-dim: rgba(178,8,56,.25); --dp-focus-tint: #FCEBF0; /* same tint pattern as --dp-red-tint (light) */ } /* ========================================================================== Dark mode overrides -- 2026-07-24, per Victor: global per-account setting, all 5 KDP roles (Director down to Driver -- Driver being the primary motivating case, checking the app in a cab at night). Deliberately implemented as a single :root variable override block rather than a parallel component stylesheet -- every component in this file (and the vast majority of index.html) already reads color through these semantic custom properties, so flipping their VALUES under body.dp-dark-mode recolors the whole app in one place. The exceptions (hardcoded literal hex colors that bypass these variables entirely -- status pills, the legacy .rwp-driver-view component, coaching notes, PDF export templates) are handled with their own targeted dark-mode overrides directly in index.html, next to each literal color, rather than duplicated here -- PDF export templates are explicitly EXCLUDED from dark mode since they render onto white paper regardless of the viewer's screen theme. ========================================================================== */ body.dp-dark-mode { /* ========================================================================== House Steel re-base — 2026-08-18, per Victor: light mode stays as-is; dark mode re-based on mirracode.com's navy (House Steel) instead of the old flat charcoal. Charcoal's problems: achromatic scale = no depth ("just plain black"), and crimson had to scream to survive on it (#D42457 read fluorescent-pink). Navy gives layers hue travel and grounds the crimson at the spine value #d4506e. These values are the live-tuning surface — every knob is one line. ========================================================================== */ /* Neutrals — House Steel navy scale (page → raised → panel-hover). Semantic ROLE of each slot unchanged from the original inversion. */ --dp-white: #0f1729; /* page base — House Steel graphite-navy */ --dp-gray-50: #14203a; /* panels, table stripes — raised navy */ --dp-gray-100: rgba(120,160,220,.16); /* borders/dividers/hover — blue-tinted hairline (spine signature; solid navy-on-navy borders vanish) */ --dp-gray-400: #5a6a8a; /* placeholder text, disabled icons — House Steel dim */ --dp-gray-500: #9da8c0; /* secondary text — softened muted (less aggressive than #a8b0c2) */ --dp-gray-600: #8a97b0; /* muted labels — between muted and dim */ --dp-black: #dfe3ec; /* headings, primary text — softened ink, blue-leaning (mirracode delicacy; #e8e8e8 was too hot) */ --dp-black-soft: #b9c2d4; /* soft headings — blue-shifted from achromatic */ /* Attention/focus — House Steel amber (the spine's warm accent). 2026-08-18 round 3: Victor wants mirracode's delicate manners — dainty amber lines for focus/active marks instead of red borders. Amber = shared house chrome; crimson stays for brand/danger moments. */ --dp-focus: #d49a35; --dp-focus-dim: rgba(212,154,53,.35); --dp-focus-tint: rgba(212,154,53,.12); /* barely-amber badge bg — faded into the navy, amber text carries it */ /* Brand — AMBER in dark mode. 2026-08-18 round 4, Victor's call after seeing the View As box in house colors inside the oxide dashboard: "I like the mirracode yellow on that background." The experiment ran itself — one amber box beat every oxide surface around it. Amber doesn't chromostereopsis-fight navy (the whole spine is proof). Crimson stays as light-mode identity. Round 5: intensity one click down (#e0a43c -> #d49a35) — EfiTrac's buttons are bigger than the spine's chrome, full-sat amber reads hot at that scale. Hover tightens (#c98a2f -> #bd7f28). Fills keep NAVY text (spine pattern). */ --dp-red: #d49a35; --dp-red-hover: #bd7f28; --dp-red-tint: rgba(212,154,53,.12); /* barely-amber badges/alerts — matches --dp-focus-tint */ --dp-text-on-red: #0f1729; /* navy text on amber fills (was white-on-red; white on amber glares) */ /* Status green — kept from prior dark tuning; reads well on navy. */ --dp-green: #34B65C; --dp-green-tint: #12291d; --dp-danger-red: #C23030; /* --dp-text-on-red intentionally NOT overridden -- red buttons keep white text in both modes, that never needed to change. */ /* Load-status badge colors — re-tinted for the navy base (were tuned for charcoal): green/gold darks lean navy so pills sit IN the surface instead of floating on it. Text values unchanged. */ --dp-status-completed-bg: #12291d; --dp-status-completed-text: #4ADE80; --dp-status-created-bg: #262015; --dp-status-created-text: #F0B440; /* Semantic variables -- 2026-07-24 FIX: these must be overridden DIRECTLY here, not left to cascade through the raw --dp-black/ --dp-white/etc. overrides above. Root cause: --dp-text-primary is declared once at :root as `var(--dp-black)` -- that substitution is resolved and INHERITED as a fixed computed value down from :root to body, before body.dp-dark-mode's --dp-black override is even in scope. Redefining --dp-black on body does not retroactively change --dp-text-primary's value that's already flowing down from an ancestor. Confirmed live: without this block, --dp-black correctly read #ECEDEE in dark mode but --dp-text-primary (used by dozens of call sites, e.g. team-card metric rows) still read the light-mode #1A1A1A, rendering near-black text on a near-black card background. Fix: override every semantic variable explicitly, not just the raw neutrals/brand colors underneath them. */ --dp-bg-page: var(--dp-white); --dp-bg-panel: var(--dp-gray-50); --dp-border: var(--dp-gray-100); --dp-text-primary: var(--dp-black); --dp-text-secondary: var(--dp-gray-500); --dp-btn-primary-bg: var(--dp-red); --dp-btn-primary-bg-hover: var(--dp-red-hover); --dp-btn-primary-text: var(--dp-text-on-red); --dp-btn-secondary-bg: var(--dp-white); --dp-btn-secondary-border: var(--dp-gray-100); --dp-btn-secondary-text: var(--dp-black); --dp-btn-secondary-bg-hover: var(--dp-gray-50); --dp-btn-danger-bg: var(--dp-red); --dp-btn-danger-text: var(--dp-text-on-red); } /* Reference component patterns (adjust per actual markup once UI structure is set) */ body { background: var(--dp-bg-page); color: var(--dp-text-primary); } .dp-panel { background: var(--dp-bg-panel); border: 1px solid var(--dp-border); } .dp-btn-primary { background: var(--dp-btn-primary-bg); color: var(--dp-btn-primary-text); border: none; } .dp-btn-primary:hover { background: var(--dp-btn-primary-bg-hover); } .dp-btn-secondary { background: var(--dp-btn-secondary-bg); color: var(--dp-btn-secondary-text); border: 1px solid var(--dp-btn-secondary-border); } .dp-btn-secondary:hover { background: var(--dp-btn-secondary-bg-hover); } .dp-text-secondary { color: var(--dp-text-secondary); } .dp-badge-alert { background: var(--dp-red-tint); color: var(--dp-red); } /* ---- Dark-mode delicacy overrides (2026-08-18 round 3, per Victor: "dainty lines instead of thickish borders", mirracode manners). Scoped to body.dp-dark-mode so LIGHT MODE IS UNCHANGED. Specificity (body.dp-dark-mode prefix) outranks the app's plain rules that load in index.html's later