/* ============================================================= Prestige Lavage Automobile — Design tokens (CSS custom properties) Theming via [data-theme="light"|"dark"] on . ============================================================= */ :root { /* Brand palette */ --red: #B31217; --red-bright: #E01A20; --red-dark: #8E0E12; /* Neutrals */ --black: #1A1A1A; --white: #FFFFFF; --gray: #6E6E6E; --gray-dark: #2A2A2A; /* WhatsApp */ --wa: #25D366; --wa-dark: #1EBE5A; /* Typography */ --font-title: 'Poppins', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --lh: 1.6; /* Spacing scale (8px grid) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; /* Radii */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Layout */ --container: 1200px; --container-narrow: 800px; --header-h: 74px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.3s; --dur-slow: 0.6s; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow: 0 10px 30px rgba(0, 0, 0, 0.10); --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.16); } /* ---------- Light theme (default) ---------- */ :root, [data-theme="light"] { --bg: #FFFFFF; --bg-alt: #F6F6F7; --surface: #FFFFFF; --surface-2: #FbFbFc; --text: #1A1A1A; --text-soft: #4A4A4A; --text-muted: #6E6E6E; --border: #E6E6E8; --border-strong: #D4D4D8; --accent: #B31217; --accent-contrast: #FFFFFF; --overlay: rgba(15, 15, 15, 0.55); --header-bg: rgba(255, 255, 255, 0.85); --shadow-color: rgba(0, 0, 0, 0.10); } /* ---------- Dark theme ---------- */ [data-theme="dark"] { --bg: #121212; --bg-alt: #1A1A1A; --surface: #1E1E1E; --surface-2: #242424; --text: #F2F2F2; --text-soft: #D0D0D0; --text-muted: #9A9A9A; --border: #2E2E2E; --border-strong: #3A3A3A; --accent: #E63A3F; /* slightly brighter red for contrast on dark */ --accent-contrast: #FFFFFF; --overlay: rgba(0, 0, 0, 0.62); --header-bg: rgba(20, 20, 20, 0.85); --shadow-color: rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6); } /* ---------- High-contrast mode ---------- */ [data-contrast="high"] { --text: #000000; --text-soft: #000000; --text-muted: #222222; --border: #000000; --accent: #9c0006; } [data-theme="dark"][data-contrast="high"] { --text: #FFFFFF; --text-soft: #FFFFFF; --text-muted: #EAEAEA; --border: #FFFFFF; --accent: #FF6b6b; }