/* ============================================================================ CarGlow Enterprise Design System — Design Tokens (v3) ---------------------------------------------------------------------------- Synthesized from the .dc.html product mockups (Admin Dashboard v2 for enterprise structure/neutrals, Login/Cleaner/Customer for CarGlow's own brand green) plus the tokens already shipped in each app's styles.css. Loaded once via before an app's own styles.css, which then only needs to add page-specific rules. Brand rationale (see DESIGN_SYSTEM.md for full writeup): CarGlow's actual brand green (--brand-500) is kept for identity moments (logo lockups, marketing, promo cards) exactly as already shipped. A slightly deeper, less saturated green (--accent-600) is used for interactive admin-surface elements (buttons, active nav, positive deltas) — flat neon green next to white reads "consumer app landing page"; enterprise dashboards (Stripe, Linear, Vercel) use a calmer accent for everyday interactive chrome. Both are real CarGlow-family greens, not an unrelated brand replacement. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap'); :root { /* ---------- Typography ---------- */ --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; /* Type scale — px, matches this codebase's existing convention (no rem migration in v3 to avoid touching every inline style at once; see DESIGN_SYSTEM.md "Deferred" section). */ --text-display: 700 32px/1.15 var(--font-display); --text-h1: 700 24px/1.25 var(--font-display); --text-h2: 600 20px/1.3 var(--font-display); --text-h3: 600 16px/1.35 var(--font-display); --text-body-lg: 500 15px/1.5 var(--font-body); --text-body: 400 14px/1.5 var(--font-body); --text-body-sm: 400 13px/1.45 var(--font-body); --text-caption: 500 12px/1.4 var(--font-body); --text-micro: 600 11px/1.3 var(--font-body); --tracking-tight: -0.02em; /* ---------- 8pt spacing system ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- Radius ---------- */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* ---------- Color: neutrals (slate — Admin Dashboard v2) ---------- */ --slate-25: #F8FAFC; --slate-50: #F1F5F9; --slate-100: #E2E8F0; --slate-200: #CBD5E1; --slate-300: #94A3B8; --slate-400: #64748B; --slate-500: #475569; --slate-600: #334155; --slate-700: #1E293B; --slate-800: #0F172A; /* ---------- Color: CarGlow brand green ---------- */ --brand-100: #E8FBF0; --brand-300: #69F0AE; --brand-500: #00C853; /* identity — logo, promo, marketing */ --brand-700: #00873B; --brand-900: #00391C; /* ---------- Color: enterprise accent green (interactive) ---------- */ --accent-50: #F0FDF4; --accent-100: #DCFCE7; --accent-500: #16A34A; --accent-600: #15803D; --accent-700: #0E5132; /* ---------- Color: secondary/info blue ---------- */ --info-50: #EFF6FF; --info-500: #2563EB; --info-600: #1D4ED8; --info-700: #0D47A1; /* ---------- Color: status ---------- */ --success-bg: var(--accent-50); --success-text: var(--accent-600); /* --warning-text/--danger-text darkened from their original #D97706/ #DC2626 — axe measured 2.86:1 and 4.41:1 against these tinted backgrounds respectively, both below the 4.5:1 AA minimum for normal text (badges, error banners, KPI down-arrows all use these). */ --warning-bg: #FEF3C7; --warning-text: #92400E; --danger-bg: #FEF2F2; --danger-text: #B91C1C; --danger-500: #EF4444; --info-bg: var(--info-50); --info-text: var(--info-600); /* ---------- Semantic surface tokens (light theme, default) ---------- */ --color-bg: var(--slate-50); --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: var(--slate-100); --color-border-strong: var(--slate-200); --color-ink: var(--slate-800); /* Deliberately darker than --slate-400 — axe-core (WCAG AA) flagged slate-400 as a 4.454:1 contrast failure against --color-bg (needs 4.5:1 for normal-size text); #5B6B80 clears 5.0:1+ against both --color-surface and --color-bg. A semantic token is allowed to diverge from its nearest primitive when accessibility requires it. */ --color-ink-muted: #5B6B80; /* --slate-300 (#94A3B8) measured 2.56:1 on white — nowhere close to the 4.5:1 normal-text needs to be genuinely readable as text (e.g. "No jobs yet" empty states) failed accessibility outright, not just marginally. --color-ink-faint is intentionally the *same* darkness as --color-ink-muted now — real text legibility wins over having a third, lighter shade in the scale. --slate-300 itself stays in the palette for non-text uses (thin dividers, disabled icon fills) where the 3:1 non-text contrast minimum still applies and is met. */ --color-ink-faint: #5B6B80; --color-sidebar-bg: var(--slate-800); --color-sidebar-ink: #FFFFFF; --color-sidebar-muted: var(--slate-300); /* --accent-500 (#16A34A) with white text is only 3.29:1 — Lighthouse caught this as a real WCAG AA failure (needs 4.5:1). --accent-600 (#15803D) clears 5.0:1 with white text; used as the default button fill (not just a hover shade) for that reason. --accent-500 stays available in the palette for non-text contexts (icons, borders, positive-delta text on a light bg, where the ratio requirement/base color differs). */ --color-primary: var(--accent-600); --color-primary-hover: var(--accent-700); --color-primary-ink: #FFFFFF; --color-focus-ring: var(--info-500); /* ---------- Elevation ---------- */ --shadow-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06); --shadow-2: 0 4px 12px rgba(15,23,42,0.08); --shadow-3: 0 12px 32px rgba(15,23,42,0.14); --shadow-brand: 0 6px 18px rgba(22,163,74,0.25); /* ---------- Glass effect (topbar-on-scroll, modal backdrop, popovers) --- */ --glass-bg: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.5); --glass-blur: blur(16px); /* ---------- Motion ---------- */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --ease-standard: cubic-bezier(0.4,0,0.2,1); --ease-decel: cubic-bezier(0,0,0.2,1); --ease-accel: cubic-bezier(0.4,0,1,1); /* ---------- Responsive breakpoints (reference only — used in @media) --- */ --bp-tablet: 1024px; --bp-mobile: 640px; } /* ---------- Dark mode ---------- Explicit opt-in via [data-theme="dark"] on (see _shared/theme.js), falling back to prefers-color-scheme when no explicit choice was made. */ :root[data-theme="dark"] { --color-bg: #0B1220; --color-surface: #111827; --color-surface-raised: #16213A; --color-border: #1F2937; --color-border-strong: #2A374B; --color-ink: #E5E9F0; --color-ink-muted: #94A3B8; --color-ink-faint: #64748B; --color-sidebar-bg: #060B14; --color-sidebar-ink: #FFFFFF; --color-sidebar-muted: #7C8AA0; --success-bg: rgba(22,163,74,0.16); --warning-bg: rgba(217,119,6,0.16); --danger-bg: rgba(220,38,38,0.16); --info-bg: rgba(37,99,235,0.16); --glass-bg: rgba(17,24,39,0.72); --glass-border: rgba(255,255,255,0.08); --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4); --shadow-2: 0 4px 14px rgba(0,0,0,0.4); --shadow-3: 0 16px 40px rgba(0,0,0,0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0B1220; --color-surface: #111827; --color-surface-raised: #16213A; --color-border: #1F2937; --color-border-strong: #2A374B; --color-ink: #E5E9F0; --color-ink-muted: #94A3B8; --color-ink-faint: #64748B; --color-sidebar-bg: #060B14; --color-sidebar-ink: #FFFFFF; --color-sidebar-muted: #7C8AA0; --success-bg: rgba(22,163,74,0.16); --warning-bg: rgba(217,119,6,0.16); --danger-bg: rgba(220,38,38,0.16); --info-bg: rgba(37,99,235,0.16); --glass-bg: rgba(17,24,39,0.72); --glass-border: rgba(255,255,255,0.08); --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4); --shadow-2: 0 4px 14px rgba(0,0,0,0.4); --shadow-3: 0 16px 40px rgba(0,0,0,0.55); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }