/* ========================================================================== ROULO GLACE — design tokens. v2 WHAT CHANGED AND WHY. v1 was a pale, ruled, near-square "ledger" in a slab serif. It was defensible on paper and wrong in the room: flat, greyed, motionless, and it rationed the client's gold until the brand never landed. Avoiding the dark-logistics cliché that hard produced something worse — an institutional form. This version takes the client's own black-and-gold, which they were confident enough to build a brand on, and executes it at the level the product deserves. THE SCENE: the cab at 2am on the 401. Warm darkness, the instrument cluster throwing amber, marker lights down the length of the deck. Expensive, awake, in motion. Not a neon dashboard — there is exactly one colour in this system and it is the one they already own. FORM ARCHETYPE Instrument — dimensional, tactile, generous radius, real depth, motion that responds. Surfaces LIFT off the ground. NAV ARCHETYPE Icon rail + contextual panel; app tab bar on the phone. LANDING Cinematic — one full-bleed statement, then momentum. COLOUR STRATEGY Committed — gold carries the interface, everything else is a warm near-monochrome. Status colours are the only exception and they never borrow the gold. ========================================================================== */ :root { color-scheme: dark; /* ---- Ground: warm near-black. Every step up is a real lift, not a tint. Hue 70 at very low chroma keeps it warm-neutral — never blue-black (cold and clinical) and never brown (muddy). ------------------------- */ --bg: oklch(0.145 0.008 70); --surface: oklch(0.188 0.010 70); --surface-2: oklch(0.228 0.012 70); --surface-3: oklch(0.272 0.014 72); --ink: oklch(0.975 0.006 80); --ink-2: oklch(0.865 0.008 78); --muted: oklch(0.700 0.012 78); --muted-2: oklch(0.585 0.012 78); --line: oklch(0.290 0.012 72); --line-strong: oklch(0.400 0.016 74); /* ---- The gold. Not an accent any more — the primary. It is the brand, the action, the price and the focus ring. ---------- */ --primary: oklch(0.805 0.155 79); --primary-strong: oklch(0.870 0.150 84); --primary-dim: oklch(0.660 0.135 74); --primary-soft: oklch(0.300 0.055 76); /* gold-tinted dark chip */ --primary-soft-2: oklch(0.385 0.080 76); --on-primary: oklch(0.180 0.045 68); /* near-black on gold */ --primary-glow: oklch(0.805 0.155 79 / 0.26); /* Kept for the token contract. On this ground the accent is the gold's cooler counterweight — used for information, never for action. */ --accent: oklch(0.760 0.105 232); --accent-strong: oklch(0.830 0.105 236); --accent-soft: oklch(0.290 0.050 235); --accent-ink: oklch(0.800 0.100 232); --on-accent: oklch(0.160 0.030 235); /* The one INVERTED band per page — light on dark is the drench here. */ --drench: oklch(0.955 0.012 80); --drench-2: oklch(0.905 0.018 80); --on-drench: oklch(0.180 0.014 72); --on-drench-muted: oklch(0.430 0.016 74); --drench-line: oklch(0.855 0.018 78); /* ---- Semantic — states only, and none of them may read as gold. Warning sits at 45 (orange-red) precisely so it cannot be confused with the brand at 79. ------------------------------------------------ */ --success: oklch(0.760 0.150 158); --success-soft: oklch(0.275 0.055 158); --success-ink: oklch(0.820 0.140 158); --warning: oklch(0.735 0.165 45); --warning-soft: oklch(0.285 0.060 42); --warning-ink: oklch(0.810 0.150 45); --danger: oklch(0.680 0.195 22); --danger-soft: oklch(0.285 0.075 22); --danger-ink: oklch(0.775 0.170 22); --info: oklch(0.760 0.105 232); --info-soft: oklch(0.285 0.050 235); --info-ink: oklch(0.820 0.095 232); /* Charts: a gold-through-ember ramp. */ --c-1: oklch(0.870 0.140 88); --c-2: oklch(0.790 0.155 74); --c-3: oklch(0.690 0.150 58); --c-4: oklch(0.580 0.140 42); --c-5: oklch(0.470 0.120 30); /* ---- Typography --------------------------------------------------------- Sora — geometric technical display, confident and modern at weight. Onest — humanist workhorse, warm and unusually legible at 12–14px. Geist Mono — the VIN face. Slashed zero; 0/O and 1/I never ambiguous. */ --font-display: "Sora", "Helvetica Neue", sans-serif; --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Marketing scale — bigger and tighter than v1. Ceiling 5.25rem, under the cap. */ --fs-display: clamp(2.85rem, 1.5rem + 4.6vw, 5.25rem); --fs-h1: clamp(2.15rem, 1.4rem + 2.7vw, 3.6rem); --fs-h2: clamp(1.65rem, 1.2rem + 1.6vw, 2.55rem); --fs-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.65rem); --fs-lead: clamp(1.0625rem, 1.0rem + 0.35vw, 1.3125rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-xs: 0.8125rem; --t-32: 2rem; --t-28: 1.75rem; --t-22: 1.375rem; --t-18: 1.125rem; --t-16: 1rem; --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --t-11: 0.6875rem; --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.62; --lh-relaxed: 1.72; --tracking-display: -0.035em; --tracking-ui: -0.005em; --tracking-rubric: 0.02em; /* ---- Spacing ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 5rem; --s-10: 6rem; --s-12: 8rem; --section: clamp(4rem, 2.6rem + 5.4vw, 8rem); --section-tight: clamp(2.75rem, 2rem + 3vw, 4.5rem); --gutter: clamp(1.25rem, 3.8vw, 2.5rem); --container: 1240px; --container-wide: 1460px; --container-narrow: 740px; --measure: 66ch; /* ========================================================================== FORM LAYER — Instrument. Surfaces lift; nothing is a flat rectangle. ========================================================================== */ /* 1. Shape — generous and modern. Three radii, locked. */ --r-ctl: 10px; --r-card: 20px; --r-lg: 28px; --r-full: 999px; /* 2. Border weight — hairlines, but on a dark ground they read as edges catching light rather than as rules on paper. */ --bw: 1px; --bw-strong: 1.5px; --rule: var(--bw) solid var(--line); --rule-strong: var(--bw-strong) solid var(--line-strong); /* 3. Elevation — real depth. A top inset highlight is what makes a dark surface read as lit rather than as a hole. */ --lift: inset 0 1px 0 oklch(1 0 0 / 0.055); --elev-card: 0 18px 40px -24px oklch(0 0 0 / 0.85), var(--lift); --elev-pop: 0 28px 56px -20px oklch(0 0 0 / 0.9), var(--lift); --elev-modal: 0 48px 96px -32px oklch(0 0 0 / 0.95), var(--lift); --elev-gold: 0 10px 30px -10px var(--primary-glow); /* 4. Density — generous. Touch-first, and it reads modern rather than crammed. The phone relaxes further; the ledger tightens slightly. */ --h-ctl: 48px; --h-ctl-sm: 36px; --h-ctl-lg: 58px; --h-row: 56px; --pad-card: var(--s-5); --gap-grid: var(--s-4); /* 5. Divider strategy — rows only. No cell grid: the Excel look was half of what made v1 read as old software. */ --cell-rule: none; --row-rule: var(--bw) solid oklch(0.290 0.012 72 / 0.75); /* 6. Heading treatment — sentence case, tight, heavy. No caps rubrics. */ --wt-head: 600; --wt-body: 400; --tracking-heading: -0.025em; --case-head: none; /* ---- Elevation ramp ---- */ --e-1: 0 2px 8px -4px oklch(0 0 0 / 0.6); --e-2: 0 10px 24px -14px oklch(0 0 0 / 0.7); --e-3: 0 20px 44px -22px oklch(0 0 0 / 0.8); /* ---- Motion — this is the other half of what was missing. Springy on the way in, quick on the way out. ------------------------- */ --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 700ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* out-quint */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* out-expo */ --ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* ---- Prototype chrome ---- */ --pocbar-h: 46px; --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }