/* ═══════════════════════════════════════════════════════════════════════ VecNine — Canonical design tokens v2 Session 128 — premium-feel design pass. This v2 reorganization addresses the "trendy SaaS landing page" critique from session 128 by collapsing a sprawling token set into a disciplined, scale-based system: - Type scale: 9 sizes on a ~1.2 ratio (was: 30+ ad-hoc sizes) - Color scale: 1 brand (orange), 1 editorial (gold), 3 center colors, 1 success — semantic accents (state-in/out, tone-*, blue/green) were collapsed onto these. - Surface scale: bg + 3 surface tiers (was: ~10 opacities) - Text scale: 4 opacity tiers (was: ~12) - Border scale: 3 opacity tiers (was: ~6) - Space scale: 8 steps on a 4px base (was: arbitrary) - Radius scale: 4 steps (was: 5/6/7/8/9/10/12/14/16/18) - Button heights: 3 sizes (was: 32/38/42/13+padding/etc) - Removed: 5 typefaces → 2 (Outfit + JetBrains Mono only) LEGACY ALIASES are preserved at the bottom so existing pages that haven't been migrated continue to render. Per the v1 cascade rule, inline :root blocks on pages still win at equal specificity; pages with their own :root are unchanged until migrated. When you build a new page or migrate an old one: - first - Drop the inline :root block - Use the v2 names (--text-h1, --space-4, --btn-md, etc.) ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces ──────────────────────────────────────────────────────── bg = page background. s1 = subtle elevation (card on bg). s2 = stronger elevation (overlay, sheet). s3 = highest (modal). The site went too gradient-heavy in v1; v2 uses flat surfaces and only tokens.css owns elevation. */ --bg: #0a0720; --s1: rgba(255,255,255,.03); --s2: rgba(255,255,255,.06); --s3: rgba(255,255,255,.10); /* ── Text tiers (white-on-dark) ────────────────────────────────────── */ --text-1: rgba(255,255,255,.92); /* primary body & headings */ --text-2: rgba(255,255,255,.62); /* secondary, captions, metadata */ --text-3: rgba(255,255,255,.36); /* tertiary / placeholders */ --text-4: rgba(255,255,255,.16); /* disabled / faintest */ /* ── Borders ───────────────────────────────────────────────────────── Three tiers only. Subtle / standard / strong. */ --border-1: rgba(255,255,255,.06); --border-2: rgba(255,255,255,.12); --border-3: rgba(255,255,255,.22); /* ── Brand colors ──────────────────────────────────────────────────── One brand orange, one editorial gold. NO gradients in the v2 system; buttons are flat. The -d variant is for hover/active states only, not for gradient stops. */ --or: #E8692A; /* brand orange, primary actions */ --or-d: #C0501A; /* hover/pressed state */ --or-faint: rgba(232,105,42,.10); /* tinted bg (e.g., selected row) */ --gold: #c9a96e; /* editorial accent, use sparingly */ --gold-faint: rgba(201,169,110,.10); /* ── Center colors (gut, heart, head) ──────────────────────────────── These are core to VecNine's IP and stay. Use only for type-coded content; not for general UI accent. */ --gut: #c47050; --heart: #a86090; --head: #5090b8; /* ── State (single success color; semantic state collapsed) ────────── v1 had state-in / state-neu / state-out and tone-gift / tone-watch / tone-key / tone-note — that was 7+ semantic colors. v2: success is green; warning uses gold; error uses a desaturated brand-orange shift; info uses --head. */ --success: #7ab898; --warning: var(--gold); --error: #c0604a; --info: var(--head); /* ── Typography ────────────────────────────────────────────────────── TWO families. Outfit for everything except sequence numerals and code, which use JetBrains Mono. Lora/Inter/Syncopate were dropped in S128. Body weight is 400 (was 300). 300 read as underexposed on dark. Display weight is 300 (light) for hero headlines only. */ --font-sans: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --weight-light: 200; /* hero display, lightest */ --weight-body: 300; /* body, default — matches v1 */ --weight-medium: 500; /* emphasis */ --weight-bold: 600; /* strong emphasis, button text */ /* ── Type scale (9 steps, ~1.2 ratio) ──────────────────────────────── Floor 12px. Anything smaller (8/9/10px micro-tags) is banned. Step size line use 0 12 1.5 metadata, captions 1 14 1.6 body small 2 16 1.6 BODY DEFAULT 3 18 1.55 body lead, list items 4 22 1.4 subhead, card title 5 28 1.25 section heading 6 36 1.2 page heading 7 48 1.1 hero h2 8 64 1.05 hero h1 (display weight) */ --text-0: 12px; --lh-0: 1.5; --text-1s: 14px; --lh-1: 1.6; --text-2s: 16px; --lh-2: 1.6; --text-3s: 18px; --lh-3: 1.55; --text-4s: 22px; --lh-4: 1.4; --text-5s: 28px; --lh-5: 1.25; --text-6s: 36px; --lh-6: 1.2; --text-7s: 48px; --lh-7: 1.1; --text-8s: 64px; --lh-8: 1.05; /* ── Space scale (4px base, 8 steps) ───────────────────────────────── Step px use 1 4 hairline gap (icon to text) 2 8 small gap (related items) 3 12 standard gap (list items) 4 16 component padding small 5 24 component padding standard 6 32 section internal spacing 7 48 section gap 8 80 section padding large */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px; /* ── Radius (4 steps; was 5/6/7/8/9/10/12/14/16/18) ──────────────── */ --radius-sm: 4px; /* tags, small badges */ --radius-md: 8px; /* buttons, inputs, small cards */ --radius-lg: 12px; /* standard cards */ --radius-xl: 16px; /* feature cards, sheets */ /* ── Button heights (3 sizes; was 6+) ──────────────────────────────── */ --btn-sm: 32px; --btn-md: 40px; --btn-lg: 48px; /* ── Layout ────────────────────────────────────────────────────────── Reading measure cap at 680px for body text — anything wider is too long a line. UI shells can use --layout-wide. */ --layout-reading: 680px; /* prose pages */ --layout-standard: 960px; /* mixed content */ --layout-wide: 1100px; /* dashboards, tools */ --nav-h: 58px; /* ── Motion (one easing, three durations) ────────────────────────── */ --ease: cubic-bezier(.4,0,.2,1); --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; /* ── Shadows (sparing; no neon glows) ─────────────────────────────── */ --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 4px 12px rgba(0,0,0,.4); --shadow-3: 0 12px 32px rgba(0,0,0,.5); } /* ─────────────────────────────────────────────────────────────────────── LEGACY ALIASES (v1 names → v2 values) Pages that have not been migrated yet continue to work because their inline :root blocks resolve these names. The aliases here exist so pages WITHOUT inline :root blocks get sensible v2 defaults under the old name. Once a page is migrated, both can coexist. Where v1 had MORE colors than v2 (state-in/neu/out, tone-*, etc.), the legacy alias collapses onto the closest v2 token. This means some pages will look slightly different after the global swap — flagged for eyeball review on the rights-holder side. ─────────────────────────────────────────────────────────────────────── */ :root { /* fonts */ --fd: var(--font-sans); --fb: var(--font-sans); --fs: var(--font-sans); --fm: var(--font-mono); --mono: var(--font-mono); /* brand */ --od: var(--or-d); --orange: var(--or); --gold-d: #a8895a; /* text */ --w: var(--text-1); --w1: var(--text-1); --w2: var(--text-2); --w3: var(--text-3); --w4: var(--text-4); --white: var(--text-1); /* surfaces (legacy names) */ --s1-bg: var(--s1); --s2-bg: var(--s2); --b0: #0b0922; /* PWA inset cell surface */ --b: var(--border-1); --b1: var(--border-1); --b2: var(--border-2); --b3: var(--border-3); --b4: rgba(255,255,255,.32); /* legacy semantic colors collapse onto v2 */ --grn: var(--success); --grnb: rgba(122,184,152,.22); --grnt: rgba(122,184,152,.06); --gutb: rgba(196,112,80,.22); --gutt: rgba(196,112,80,.06); --heartb: rgba(168,96,144,.22); --heartt: rgba(168,96,144,.06); --headb: rgba(80,144,184,.22); --headt: rgba(80,144,184,.06); --state-in: var(--success); --state-neu: var(--gold); --state-out: var(--error); --tone-gift: var(--success); --tone-watch: var(--gold); --tone-key: var(--or); --tone-note: var(--head); /* layout */ --max: var(--layout-wide); }