/* ============================================================ SHAHIN AUTO SERVICE — DESIGN TOKENS (dual light / dark) Single source of truth for theme colors. Values are SPACE-SEPARATED RGB CHANNEL TRIPLETS so Tailwind's `rgb(var(--token) / )` opacity utilities work. Loaded BEFORE custom.css. The .dark class lives on . ============================================================ */ :root { /* Canvas & surfaces (light = white on gray-50) */ --background: 249 250 251; /* page canvas */ --surface: 255 255 255; /* cards, header */ --surface-2: 243 244 246; /* nested fills */ --surface-3: 229 231 235; /* hover fills, inputs*/ /* Text */ --foreground: 17 24 39; /* primary text */ --muted: 75 85 99; /* secondary text */ --muted-2: 107 114 128; /* tertiary text */ /* Lines */ --border: 229 231 235; /* Brand — blue */ --brand: 30 64 175; /* #1E40AF */ --brand-strong: 30 58 138; /* #1E3A8A */ --brand-light: 59 130 246; /* #3B82F6 */ /* Brand — gold/accent */ --accent: 255 215 0; /* #FFD700 */ --accent-strong: 255 165 0; /* #FFA500 */ /* Utility */ --ring: 30 64 175; --on-accent: 17 24 39; /* text on gold buttons */ --on-brand: 255 255 255; /* text on blue buttons */ --shadow-color: 30 64 175; /* tint for brand shadows */ color-scheme: light; } .dark { /* Charcoal canvas, stepped surfaces for elevation */ --background: 15 17 21; /* #0F1115 */ --surface: 30 33 40; /* #1E2128 */ --surface-2: 42 46 56; /* #2A2E38 */ --surface-3: 52 57 69; /* #343945 */ --foreground: 237 239 243; --muted: 163 169 181; --muted-2: 130 137 150; --border: 54 59 71; /* Lightened blue for WCAG contrast on charcoal */ --brand: 96 134 245; /* #6086F5 */ --brand-strong: 59 100 220; --brand-light: 120 156 250; /* Warmed gold reads premium (not neon) on dark */ --accent: 255 199 64; /* #FFC740 */ --accent-strong: 255 176 51; --ring: 120 156 250; --on-accent: 17 24 39; /* gold stays light → dark text */ --on-brand: 255 255 255; --shadow-color: 0 0 0; color-scheme: dark; } /* Paint fallback — applies immediately from this static file so the correct theme background shows before the Tailwind CDN JIT runs (prevents theme flash on load). */ html { background-color: rgb(var(--background)); color: rgb(var(--foreground)); } /* Prevent stray horizontal scroll (off-canvas panels, wide decorative blobs). `clip` doesn't create a scroll container, so it won't break the sticky header. */ html, body { overflow-x: clip; max-width: 100%; }