/* vainio-light theme -- Vide brand (gold + forest green on warm paper). * * Tier-2 semantic aliases plus theme-local vainio-* primitives, following * the koud-light / mk-light precedent: tokens.css primitives stay * untouched; this file owns everything brand-specific. * * Source of truth: docs/design/design-system.md (Vainio, adopted * 2026-07-20 from UI exploration 3b). Hex values from the approved * mockups are kept in comments next to their OKLCH equivalents. * Green/gold ramps tuned 2026-08-21 per demo feedback (#179): * forest -> banknote green, ochre -> classic gold. * * Fonts: Schibsted Grotesk (display) + Instrument Sans (body). Self-host * WOFF2 latin/latin-ext subsets under /shared/fonts/ and declare the * @font-face pairs alongside the existing families in tokens.css (or a * sibling fonts file) before enabling this theme. */ [data-theme="vainio-light"] { /* ---- vainio primitives (theme-local tier 1) ---- */ /* warm paper neutrals (hue ~90) */ --vainio-paper-0: oklch(100% 0 0); /* #FFFFFF */ --vainio-paper-1: oklch(98.3% 0.005 95); /* #FBFAF6 */ --vainio-paper-2: oklch(97.7% 0.017 90); /* #FDF8EE */ --vainio-paper-border: oklch(92.3% 0.012 95); /* #EAE6DC */ --vainio-paper-hairline: oklch(94.8% 0.013 95); /* #F0ECE1 */ /* banknote green ramp (hue ~137-156) */ --vainio-green-ink: oklch(24.7% 0.029 156); /* #15251B */ --vainio-green-deep: oklch(38.5% 0.073 155); /* #1E4F32 */ --vainio-green-soft: oklch(95.2% 0.017 137); /* #EAF2E7 */ --vainio-green-line: oklch(89.8% 0.032 141); /* #D2E3CF */ --vainio-green-muted: oklch(55% 0.028 143); /* #687667 */ --vainio-green-faint: oklch(68.5% 0.026 139); /* #929E8F */ --vainio-cream: oklch(95.5% 0.012 95); /* #F5F1E6 */ /* classic gold ramp (hue ~86-95) */ --vainio-gold-base: oklch(76.7% 0.139 91); /* #D4AF37 */ --vainio-gold-light: oklch(88.1% 0.117 95); /* #F0D77A */ --vainio-gold-soft: oklch(94.5% 0.05 93); /* #F8EDC8 */ --vainio-gold-ink: oklch(47.4% 0.097 86); /* #745700 */ /* ---- surfaces ---- */ --color-bg: var(--vainio-paper-1); --color-surface-1: var(--vainio-paper-0); --color-surface-2: var(--vainio-paper-2); --color-surface-3: var(--vainio-paper-0); /* ---- borders ---- */ --color-border: var(--vainio-paper-border); --color-border-strong: oklch(84% 0.02 95); /* #DDD6C6 */ /* ---- text ---- */ --color-text: var(--vainio-green-ink); --color-text-muted: var(--vainio-green-muted); --color-text-subtle: var(--vainio-green-faint); --color-text-on-brand: var(--vainio-green-ink); /* ink on gold */ /* ---- brand action (gold primary; hover/active darken) ---- */ --color-brand: var(--vainio-gold-base); --color-brand-hover: oklch(70.4% 0.133 88); /* #C29A25 */ --color-brand-active: oklch(63.8% 0.123 86); /* #AD851C */ /* ---- secondary action / emphasis surface (deep green) ---- */ --color-action-2: var(--vainio-green-deep); --color-action-2-hover: oklch(34% 0.065 155); /* #174229 */ --color-on-action-2: var(--vainio-cream); --color-on-action-2-accent: var(--vainio-gold-light); --color-on-action-2-muted: oklch(78.5% 0.025 155); /* #ADBEB2 */ /* nested surfaces on the emphasis block (marketing dark band cards, footer) -- design-system.md 5 "dark emphasis block" */ --color-action-2-well: oklch(33.5% 0.06 155); /* #194029 */ --color-action-2-line: oklch(43% 0.045 155); /* #3C5745 */ --color-action-2-deep: oklch(19.5% 0.025 155); /* #0B1810 */ /* ---- semantic intents ---- */ --color-success: var(--vainio-green-deep); --color-success-hover: oklch(34% 0.065 155); /* #174229 */ --color-warning: var(--vainio-gold-base); --color-warning-hover: var(--vainio-gold-ink); /* danger maps to the shared red ramp from tokens.css (deletes + error states; overdue is warning-gold by design, see design-system.md 2.3). The semantic alias is per-theme, so it must be mapped explicitly. */ --color-danger: var(--danger-base); --color-danger-hover: var(--danger-strong); --color-danger-active: oklch(35% 0.15 25); /* ---- intent backgrounds (soft, themed) ---- */ --color-brand-bg: var(--vainio-gold-soft); --color-success-bg: var(--vainio-green-soft); --color-warning-bg: var(--vainio-gold-soft); --color-danger-bg: var(--danger-soft); --color-info: var(--vainio-green-deep); --color-info-bg: var(--vainio-green-soft); /* ---- focus ring ---- */ --color-focus: oklch(76.7% 0.139 91 / 0.5); /* gold, 50% */ /* ---- overlay surfaces ---- */ --color-backdrop: oklch(24.7% 0.029 156 / 0.45); --color-tooltip-bg: var(--vainio-green-ink); --color-tooltip-fg: var(--vainio-cream); /* ---- shadow tints (green-cast, never pure black) ---- */ --color-shadow-line: oklch(33% 0.06 155 / 0.06); --color-shadow-bloom: oklch(33% 0.06 155 / 0.10); --color-surface-highlight: oklch(99% 0.003 95 / 0.7); /* ---- typography ---- */ --font-display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: var(--font-body); /* ---- shape -- card radius consumes the shared --radius-lg (14px) added to tokens.css per design-system.md section 8, deviation 1; nested rows keep a theme-local 12px until a shared step exists ---- */ --vainio-radius-card: var(--radius-lg); --vainio-radius-row: 12px; --vainio-radius-modal: var(--radius-xl); /* modal card corner (#105) */ /* ---- marketing-surface gradients (max 3 stops, low chroma) ---- */ --color-gradient-hero: linear-gradient(135deg, oklch(97% 0.02 90 / 0.7) 0%, oklch(95.2% 0.017 137 / 0.5) 60%, oklch(94.5% 0.05 93 / 0.35) 100%); --color-gradient-card: linear-gradient(145deg, oklch(95.2% 0.017 137 / 0.4) 0%, oklch(94.5% 0.05 93 / 0.2) 100%); color-scheme: light; }