/* ========================================================== TRU DESIGN TOKENS — single source of truth L1 primitives → L2 semantic → components consume L2 only. NEVER reference an L1 primitive from a component. NEVER write a raw hex outside this file. ========================================================== */ :root { /* ---------- L1 · PRIMITIVES ---------- */ --tru-ink-900: #06080D; --tru-ink-800: #0D1117; --tru-ink-700: #161B22; --tru-ink-600: #21262D; --tru-ink-500: #30363D; --tru-ink-300: #6E7681; --tru-ink-100: #B1BAC4; --tru-paper: #E8EAE6; --tru-paper-pure: #FFFFFF; --tru-cyan-400: #22D3EE; /* accent — dark surfaces only */ --tru-cyan-500: #06B6D4; /* accent — light surfaces only */ --tru-cyan-600: #0891B2; /* hover / pressed */ --tru-amber-500: #F59E0B; /* attention / retake — NOT error */ --tru-red-500: #EF4444; /* system error · LIVE recording */ --tru-green-500: #10B981; /* connected; otherwise sparing */ /* ---------- L2 · SEMANTIC (components use these) ---------- */ --bg-base: var(--tru-ink-900); --bg-raised: var(--tru-ink-800); --bg-overlay: var(--tru-ink-700); --bg-inset: var(--tru-ink-600); --border-subtle: var(--tru-ink-500); --border-strong: var(--tru-ink-300); --text-primary: var(--tru-paper); --text-secondary: var(--tru-ink-100); --text-muted: var(--tru-ink-300); --text-on-accent: var(--tru-ink-900); --accent: var(--tru-cyan-400); --accent-hover: var(--tru-cyan-600); --accent-surface: rgba(34, 211, 238, 0.10); --accent-border: rgba(34, 211, 238, 0.35); --focus-ring: var(--tru-cyan-400); --state-attention: var(--tru-amber-500); --state-error: var(--tru-red-500); --state-success: var(--tru-green-500); --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); --glass-blur: blur(20px) saturate(140%); } /* ========================================================== TIER OVERRIDES Set data-app on or the app shell root. One line per app. Nothing works without this attribute. ========================================================== */ /* ---------- FIELD · CAPTURE (colour-critical) ---------- TruLens — dealer merchandising photography. Neutral viewing environment is a hard product requirement. */ [data-app="trulens"] { color-scheme: dark; --bg-base: #000000; --bg-raised: #0A0A0A; --bg-overlay: #141414; --text-primary: #FFFFFF; --text-secondary: #C9D1D9; --accent: #2DE1F5; --accent-hover: #14C4D8; --focus-ring: #2DE1F5; --photo-surround: #1A1A1A; /* zero-saturation grey */ --photo-void: #000000; --photo-proof: #FFFFFF; /* white-background proofing mode */ } /* ---------- FIELD · ASSESSMENT ---------- TruInspect — VIR generation. Outdoor, high contrast. No colour-accuracy constraint; accent used freely for state. */ [data-app="truinspect"] { color-scheme: dark; --bg-base: #000000; --bg-raised: #0A0A0A; --bg-overlay: #141414; --text-primary: #FFFFFF; --text-secondary: #C9D1D9; --accent: #2DE1F5; --accent-hover: #14C4D8; --focus-ring: #2DE1F5; } /* ---------- LIVE TIER ---------- TruLive (buyer walkaround) · TruTrade (seller appraisal). Real-time video of a vehicle drives a money decision. Dark UI, zero saturation around the stream. */ [data-app="truview"], [data-app="trutrade"] { color-scheme: dark; --bg-base: #0A0A0A; --bg-raised: #141414; --bg-overlay: #1F1F1F; --border-subtle: #2A2A2A; --text-primary: #FFFFFF; --text-secondary: #C9D1D9; --text-muted: var(--tru-ink-300); --accent: var(--tru-cyan-400); --accent-hover: var(--tru-cyan-600); --focus-ring: var(--tru-cyan-400); --video-surround: #1A1A1A; /* zero-saturation grey */ --video-void: #000000; /* fullscreen stream */ --state-live: var(--tru-red-500); /* recording — NEVER cyan */ --state-waiting: var(--tru-amber-500); --state-connected: var(--tru-green-500); --state-degraded: var(--tru-amber-500); } /* ---------- WORKSTATION TIER ---------- TruFlow (no tier suffix — Premium is the product), TruCRM. Inherits :root. */ [data-app="truflow"], [data-app="trucrm"] { color-scheme: dark; } /* ---------- CONSUMER TIER ---------- TruAfford only — form widget inside a 3rd-party dealer page. LIGHT is default. */ [data-app="truafford"] { color-scheme: light; --bg-base: var(--tru-paper-pure); --bg-raised: #F6F7F5; --bg-overlay: #EDEFEC; --bg-inset: #E4E7E2; --border-subtle: #D4D8D2; --border-strong: #A8AFA6; --text-primary: var(--tru-ink-900); --text-secondary: var(--tru-ink-700); --text-muted: var(--tru-ink-300); --text-on-accent: var(--tru-paper-pure); --accent: var(--tru-cyan-500); --accent-hover: var(--tru-cyan-600); --accent-surface: rgba(6, 182, 212, 0.08); --accent-border: rgba(6, 182, 212, 0.30); --focus-ring: var(--tru-cyan-500); --glass-bg: rgba(255, 255, 255, 0.65); --glass-border: rgba(0, 0, 0, 0.06); } /* TruAfford on a dark dealer host site */ [data-app="truafford"][data-theme="dark"] { color-scheme: dark; --bg-base: var(--tru-ink-900); --bg-raised: var(--tru-ink-800); --bg-overlay: var(--tru-ink-700); --border-subtle: var(--tru-ink-500); --text-primary: var(--tru-paper); --text-secondary: var(--tru-ink-100); --text-on-accent: var(--tru-ink-900); --accent: var(--tru-cyan-400); --focus-ring: var(--tru-cyan-400); --glass-bg: rgba(255, 255, 255, 0.04); --glass-border: rgba(255, 255, 255, 0.08); } /* ---------- CHAT ---------- Per-client theming. Client overrides L2 semantic tokens ONLY, injected at runtime. Never override L1. Never fork this file. */ [data-app="chat"] { }