/* ═══════════════════════════════════════════════════════════════════════ VidRender design tokens — v2 premium pass. Every color/space/type decision lives here. Dark mode ships built-in: auto via prefers-color-scheme, forced via . ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; } :root { /* ── brand (theme-independent) ── */ --brand-1: #FF9A2E; --brand-2: #3FB89C; --brand-3: #15C2D4; --grad: linear-gradient(100deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%); --grad-soft: linear-gradient(115deg, rgba(255,154,46,.10), rgba(63,184,156,.09) 50%, rgba(21,194,212,.10)); /* ── light theme (default) ── */ --bg: #FCFBF8; --bg-raised: #FFFFFF; --bg-glass: rgba(252, 251, 248, .78); --bg-sunken: #F3F1EB; --ink: #14130E; --ink-2: #403D34; --muted: #6E6A62; --faint: #9B978D; --line: #EBE9E2; --line-strong: #DFDCD1; --ring: rgba(20, 19, 14, .06); /* aurora background glows */ --aurora-a: rgba(255, 154, 46, .09); --aurora-b: rgba(21, 194, 212, .07); --aurora-c: rgba(63, 184, 156, .06); /* ink button (primary) */ --btn-ink-bg: #191712; --btn-ink-bg-hover: #26231b; --btn-ink-fg: #FCFBF8; /* elevation */ --shadow-xs: 0 1px 2px rgba(20, 19, 14, .05); --shadow-card: 0 1px 2px rgba(20, 19, 14, .03), 0 4px 14px -4px rgba(20, 19, 14, .07); --shadow-hover: 0 2px 4px rgba(20, 19, 14, .04), 0 10px 28px -8px rgba(20, 19, 14, .14); --shadow-pop: 0 6px 16px -4px rgba(20, 19, 14, .08), 0 28px 60px -16px rgba(20, 19, 14, .25); --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .85); --ok: #1F8A5D; --ok-bg: #E4F3EB; --warn: #B26E0E; --warn-bg: #FAF0DE; --danger: #C2452D; --danger-bg: #FAECE8; --info-bg: #E4F4F6; --focus: #15C2D4; --grain-opacity: .30; /* ── type ── */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; /* ── shape & motion ── */ --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-pill: 999px; --ease: cubic-bezier(.22, 1, .36, 1); --t-fast: 180ms; --t-med: 380ms; --t-slow: 600ms; color-scheme: light; } /* ── dark theme tokens (shared by auto + forced) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #100F0C; --bg-raised: #1A1914; --bg-glass: rgba(16, 15, 12, .72); --bg-sunken: #0A0907; --ink: #F2F0E9; --ink-2: #CFCCC2; --muted: #97938A; --faint: #6C685F; --line: #26241E; --line-strong: #37342B; --ring: rgba(0, 0, 0, .5); --aurora-a: rgba(255, 154, 46, .10); --aurora-b: rgba(21, 194, 212, .09); --aurora-c: rgba(63, 184, 156, .07); --btn-ink-bg: #F2F0E9; --btn-ink-bg-hover: #FFFFFF; --btn-ink-fg: #14130E; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -6px rgba(0, 0, 0, .5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6); --shadow-pop: 0 8px 20px -4px rgba(0, 0, 0, .5), 0 32px 70px -16px rgba(0, 0, 0, .7); --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .04); --ok: #4DC08A; --ok-bg: #132A1E; --warn: #E29A3C; --warn-bg: #2A2010; --danger: #E06A50; --danger-bg: #2E1712; --info-bg: #0D272B; --grain-opacity: .5; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #100F0C; --bg-raised: #1A1914; --bg-glass: rgba(16, 15, 12, .72); --bg-sunken: #0A0907; --ink: #F2F0E9; --ink-2: #CFCCC2; --muted: #97938A; --faint: #6C685F; --line: #26241E; --line-strong: #37342B; --ring: rgba(0, 0, 0, .5); --aurora-a: rgba(255, 154, 46, .10); --aurora-b: rgba(21, 194, 212, .09); --aurora-c: rgba(63, 184, 156, .07); --btn-ink-bg: #F2F0E9; --btn-ink-bg-hover: #FFFFFF; --btn-ink-fg: #14130E; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -6px rgba(0, 0, 0, .5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6); --shadow-pop: 0 8px 20px -4px rgba(0, 0, 0, .5), 0 32px 70px -16px rgba(0, 0, 0, .7); --card-highlight: inset 0 1px 0 rgba(255, 255, 255, .04); --ok: #4DC08A; --ok-bg: #132A1E; --warn: #E29A3C; --warn-bg: #2A2010; --danger: #E06A50; --danger-bg: #2E1712; --info-bg: #0D272B; --grain-opacity: .5; color-scheme: dark; }