/* ============================================================ VoltaAI Gateway — Foundation tokens (v2) ------------------------------------------------------------ Loaded ALONGSIDE base.css. Legacy pages keep working off their existing vars; pages that opt into v2 set `data-surface="marketing"` or `data-surface="product"` on , which switches both the new v2 tokens AND remaps the legacy var names so legacy component CSS still draws. Two surfaces, one type system, one accent. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ============================================================ 1. SHARED — type, motion, radius, scale (surface-agnostic) ============================================================ */ :root { --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace; --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 21px; --t-h6: 24px; --t-h5: 30px; --t-h4: 38px; --t-h3: 48px; --t-h2: 64px; --t-h1: 96px; --lh-tight: 1.08; --lh-snug: 1.25; --lh-base: 1.55; --lh-loose: 1.75; --tracking-tight: -0.03em; --tracking-base: 0; --tracking-mono: 0.02em; --tracking-eyebrow: 0.12em; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Status — same semantic colours both surfaces, tweaked per-surface in §3 */ --warn: #B45309; --danger: #B91C1C; --info: #1D4ED8; } /* ============================================================ 2. MARKETING SURFACE — light, editorial ============================================================ */ [data-surface="marketing"] { /* Paper */ --paper-0: #FFFFFF; --paper-50: #FAFAFA; --paper-100: #F4F4F5; --paper-200: #E4E4E7; --paper-300: #D4D4D8; /* Ink */ --ink-900: #0A0A0A; --ink-700: #27272A; --ink-500: #52525B; --ink-400: #71717A; --ink-300: #A1A1AA; /* Accent — restrained signal green, WCAG-AA on white */ --signal: #15803D; --signal-soft: #DCFCE7; --signal-strong: #166534; --ring: rgba(21, 128, 61, 0.45); --hairline: 1px solid var(--paper-200); --hairline-strong: 1px solid var(--paper-300); --shadow-float: 0 12px 40px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); /* === Legacy var remap so old component CSS still draws on this surface === */ --bg-primary: var(--paper-50); --bg-secondary: var(--paper-0); --bg-tertiary: var(--paper-100); --bg-elevated: var(--paper-0); --bg-input: var(--paper-0); --bg-hover: var(--paper-100); --bg-active: var(--paper-200); --text-primary: var(--ink-900); --text-secondary: var(--ink-700); --text-tertiary: var(--ink-500); --text-muted: var(--ink-400); --accent-primary: var(--signal); --accent-primary-hover: var(--signal-strong); --accent-secondary: var(--signal-strong); --accent-gold: var(--signal); --success: var(--signal); --warning: var(--warn); --error: var(--danger); --info: var(--info); --border-primary: var(--paper-200); --border-secondary: var(--paper-300); --border-focus: var(--ring); --border-subtle: var(--paper-100); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.05); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08); --shadow-glow: none; color-scheme: light; } [data-surface="marketing"] body, [data-surface="marketing"] { background: var(--paper-50); color: var(--ink-900); font-family: var(--font-sans); } /* ============================================================ 3. PRODUCT SURFACE — dark, dense, terminal-adjacent ============================================================ */ [data-surface="product"] { /* Paper (dark — "ink" of the room) */ --paper-0: #0A0A0A; --paper-50: #0F0F0F; --paper-100: #161616; --paper-200: #1F1F1F; --paper-300: #2A2A2A; /* Ink (light text on dark paper) */ --ink-900: #FAFAFA; --ink-700: #E4E4E7; --ink-500: #A1A1AA; --ink-400: #71717A; --ink-300: #52525B; --signal: #22C55E; --signal-soft: rgba(34, 197, 94, 0.10); --signal-strong: #16A34A; --warn: #F59E0B; --danger: #F87171; --info: #60A5FA; --ring: rgba(34, 197, 94, 0.5); --hairline: 1px solid var(--paper-300); --hairline-strong: 1px solid #3A3A3A; --shadow-float: 0 12px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04); /* === Legacy var remap === */ --bg-primary: var(--paper-50); --bg-secondary: var(--paper-100); --bg-tertiary: var(--paper-200); --bg-elevated: var(--paper-200); --bg-input: var(--paper-0); --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.07); --text-primary: var(--ink-900); --text-secondary: var(--ink-700); --text-tertiary: var(--ink-500); --text-muted: var(--ink-400); --accent-primary: var(--signal); --accent-primary-hover: var(--signal-strong); --accent-secondary: var(--signal-strong); --accent-gold: var(--signal); --success: var(--signal); --warning: var(--warn); --error: var(--danger); --info: var(--info); --border-primary: var(--paper-300); --border-secondary: #3A3A3A; --border-focus: var(--ring); --border-subtle: rgba(255, 255, 255, 0.04); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px rgba(34, 197, 94, 0.08); color-scheme: dark; } [data-surface="product"] body, [data-surface="product"] { background: var(--paper-50); color: var(--ink-900); font-family: var(--font-sans); } /* ============================================================ 4. SHARED TYPE PRIMITIVES ============================================================ */ [data-surface] { font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } [data-surface] .eyebrow, [data-surface] [data-eyebrow] { display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-500); margin: 0; } [data-surface] .mono { font-family: var(--font-mono); } [data-surface] .tabular { font-variant-numeric: tabular-nums; } [data-surface] h1, [data-surface] h2, [data-surface] h3, [data-surface] h4, [data-surface] h5, [data-surface] h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--ink-900); margin: 0; } [data-surface="marketing"] .h-display { font-size: clamp(48px, 9vw, 144px); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); } [data-surface] :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm); } [data-surface] ::selection { background: var(--signal-soft); color: var(--ink-900); } /* Scrollbars — minimal */ [data-surface] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-surface] ::-webkit-scrollbar-track { background: transparent; } [data-surface] ::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: var(--r-pill); } [data-surface] ::-webkit-scrollbar-thumb:hover { background: var(--ink-400); } @media (prefers-reduced-motion: reduce) { [data-surface] *, [data-surface] *::before, [data-surface] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }