/* tokens.css — Mirror Finish Auto Detailing. Sleek · Bold · Modern. Gunmetal gray + electric blue. */ :root { /* Palette (60-30-10). AA: --ink on --bg ~15:1; --on-accent white on --accent #0a66c2 ~5.4:1 */ --bg: #f7f8fa; /* 60: cool near-white */ --bg-alt: #eef1f5; /* tinted section background */ --surface: #ffffff; /* cards */ --ink: #14171c; /* body text (cool near-black) */ --ink-muted: #565d68; /* secondary text — ~5.9:1 on --bg */ --line: #d9dee6; /* hairlines */ --brand: #23272f; /* 30: gunmetal gray — dark bands */ --brand-2: #2b303a; /* lifted gunmetal for panels */ --on-brand: #f4f6f9; --brand-muted: #a7b0bd; /* muted text on gunmetal */ --accent: #0a66c2; /* 10: electric blue — CTAs (white text AA) */ --accent-hover: #0850a0; --accent-bright: #2e9bff; /* electric-blue glow / rules on dark */ --on-accent: #ffffff; /* Type — Space Grotesk (display) + Inter (body); loaded in */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-0: clamp(0.98rem, 0.92rem + 0.25vw, 1.08rem); --fs-1: clamp(1.12rem, 1rem + 0.6vw, 1.4rem); --fs-2: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); --fs-3: clamp(1.9rem, 1.45rem + 2.2vw, 2.9rem); --fs-4: clamp(2.6rem, 1.7rem + 4.8vw, 4.7rem); --lh-body: 1.6; --lh-head: 1.05; --track-label: 0.16em; /* Shape & depth — sharp, hairline */ --radius: 3px; --radius-sm: 2px; --shadow: 0 18px 44px rgba(15, 20, 30, 0.14); --shadow-sm: 0 1px 0 rgba(20, 25, 35, 0.04); /* Space */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --section-y: clamp(3.75rem, 6.5vw, 7rem); --measure: 60ch; --container: 1160px; --gutter: clamp(1rem, 4vw, 2rem); /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 200ms; }