/* ════════════════════════════════════════════════════════════════════════ tokens.css — VOS · "Daylight / Kiosk" direction — 2026-06-09 v3.0 Variable NAMES are the live engineering contract (unchanged). VALUES are the new direction. De-fingerprinted from Dark-Aurora (holo), dojo (cream blob) and TVF lineage. SYSTEM IN ONE LINE: · Neutral chrome — pure WHITE (Daylight) and pure BLACK (Kiosk) grounds. · Every brand owns ONE vivid color, injected per page-root as --brand / --brand-2 (see _data/vosColors.js + base.njk body inline style). · Two visual languages selected by [data-theme="light"|"dark"] on the page root. :root defaults = light, so the live :root build stays light. · Type: Archivo (display, tabular), Hanken Grotesk (body), Space Mono (technical labels / spec kickers). ════════════════════════════════════════════════════════════════════════ */ /* ── DEFAULTS = DAYLIGHT (light). :root keeps the live build light. ────── Light values also apply to a .vos-invert band sitting inside a dark page, so an inverted band flips to the OPPOSITE ground of its page. ───────── */ :root, [data-theme="light"], [data-theme="dark"] .vos-invert { /* SUBSTRATE — pure white, near-white alt sections */ --vos-paper: #FFFFFF; --vos-paper-deep: #F4F4F2; --vos-paper-warm: #EDEDEA; --vos-surf-solid: #FFFFFF; --vos-page-bg: #FFFFFF; /* INK — near-black on white */ --vos-ink: #0B0B0D; --vos-ink-2: #44454C; --vos-ink-3: #76777F; --vos-ink-4: #A3A4AB; --vos-hair: rgba(11,11,13,0.10); --vos-hair-2: rgba(11,11,13,0.16); --vos-on-accent: #FFFFFF; /* GLASS — opaque white cards w/ hairline (no blur in Daylight) */ --vos-glass: #FFFFFF; --vos-glass-deep: #F7F7F5; --vos-glass-edge: rgba(11,11,13,0.10); --vos-glass-grad: #FFFFFF; --vos-glass-blur: none; --vos-glass-shadow: 0 1px 2px rgba(11,11,13,.05), 0 12px 28px -18px rgba(11,11,13,.18); /* BRAND (default house violet — overridden per page root by vosColors) */ --brand: #6D28D9; --brand-2: #9B6BFF; --brand-ink: var(--brand); --brand-tile: color-mix(in srgb, var(--brand) 12%, #FFFFFF); --brand-soft: color-mix(in srgb, var(--brand) 8%, #FFFFFF); --vos-holo: var(--brand); /* SIGNAL (functional) */ --vos-signal-ok: #1AA35A; --vos-signal-warn: #C97A12; --vos-signal-err: #DC2A2A; --vos-signal-info: #2563EB; --vos-red: #DC2A2A; /* legacy aliases mapped to the new neutral system */ --vos-paper-2: #F4F4F2; --vos-yellow: var(--brand); --vos-accent: var(--brand); --vos-card: #FFFFFF; --vos-tile-ink: #0B0B0D; --vos-on-tile: #0B0B0D; --vos-ink-muted: #76777F; --vos-rule-lite: rgba(11,11,13,0.14); --vos-rule: rgba(11,11,13,0.10); --vos-ok: #1AA35A; --vos-font-sans: var(--vos-font-body); --vos-pad-x-lite: 40px; } /* ── KIOSK (dark) — pure-black ground, bright brand tiles, heavy type. Dark values also apply to a .vos-invert band inside a light page. ───── */ [data-theme="dark"], [data-theme="light"] .vos-invert { --vos-paper: #0A0A0B; --vos-paper-deep: #141417; --vos-paper-warm: #1A1A1E; --vos-surf-solid: #141417; --vos-page-bg: #0A0A0B; --vos-ink: #F6F6F8; --vos-ink-2: #A6A7B0; --vos-ink-3: #74757E; --vos-ink-4: #54555E; --vos-hair: rgba(255,255,255,0.11); --vos-hair-2: rgba(255,255,255,0.18); --vos-on-accent: #0A0A0B; --vos-glass: #141417; --vos-glass-deep: #1C1C20; --vos-glass-edge: rgba(255,255,255,0.12); --vos-glass-grad: linear-gradient(180deg,#19191D,#121215); --vos-glass-blur: none; --vos-glass-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.8); --brand-ink: var(--brand-2); --brand-tile: color-mix(in srgb, var(--brand-2) 26%, #0A0A0B); --brand-soft: color-mix(in srgb, var(--brand-2) 14%, #0A0A0B); --vos-on-tile: #0A0A0B; --vos-signal-ok: #36D17E; --vos-signal-warn: #F0B23A; --vos-signal-err: #FF6B6B; --vos-signal-info: #5B9BFF; --vos-red: #FF6B6B; --vos-card: #141417; } :root { /* ── TYPE STACKS (de-fingerprinted: no Bricolage/Inter/Fraunces) ── */ --vos-font-display: "Archivo", system-ui, sans-serif; --vos-font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --vos-font-serif: "Archivo", Georgia, serif; --vos-font-mono: "Space Mono", ui-monospace, monospace; /* ── TYPE SCALE ── */ --vos-fs-h1-xl: 84px; --vos-fs-h1: 52px; --vos-fs-h2: 34px; --vos-fs-h3: 24px; --vos-fs-h4: 19px; --vos-fs-lead: 19px; --vos-fs-body: 16px; --vos-fs-small: 13px; --vos-fs-micro: 11px; --vos-fs-mono-sm: 11px; /* ── LINE HEIGHTS ── */ --vos-lh-tight: 1.02; --vos-lh-snug: 1.18; --vos-lh-body: 1.6; --vos-lh-loose: 1.72; /* ── TRACKING ── */ --vos-tr-display: -0.02em; --vos-tr-body: 0em; --vos-tr-mono: 0.14em; /* ── RADII — Daylight defaults (rounded, premium). Kiosk tightens below ── */ --vos-r-xs: 6px; --vos-r-sm: 10px; --vos-r-md: 16px; --vos-r-lg: 20px; --vos-r-xl: 28px; --vos-r-pill: 999px; /* ── SPACING SCALE ── */ --vos-s-1: 4px; --vos-s-2: 8px; --vos-s-3: 12px; --vos-s-4: 16px; --vos-s-5: 20px; --vos-s-6: 24px; --vos-s-8: 32px; --vos-s-10: 40px; --vos-s-12: 48px; --vos-s-16: 64px; --vos-s-20: 80px; /* ── LAYOUT WIDTHS ── */ --vos-max-w: 1200px; --vos-max-w-nb: 860px; --vos-pad-x: 40px; --vos-pad-x-md: 32px; --vos-pad-x-sm: 20px; /* ── ELEVATION ── */ --vos-elev-1: 0 1px 2px rgba(11,11,13,.06); --vos-elev-2: 0 12px 30px -18px rgba(11,11,13,.20); --vos-elev-3: 0 30px 70px -30px rgba(11,11,13,.28); /* ── MOTION ── */ --vos-ease: cubic-bezier(.2, .8, .25, 1); --vos-ease-out: cubic-bezier(.16, 1, .3, 1); --vos-dur-fast: 110ms; --vos-dur-base: 190ms; --vos-dur-slow: 300ms; /* ── Z-LAYERS ── */ --vos-z-base: 0; --vos-z-sticky: 10; --vos-z-overlay: 20; --vos-z-modal: 40; --vos-z-toast: 60; } /* Kiosk tightens radii to read harder-edged / retail-signage. */ [data-theme="dark"] { --vos-r-lg: 12px; --vos-r-md: 10px; --vos-r-sm: 8px; }