/* ============================================================ wovv.ai — Colors & Type Canonical CSS layer for the wovv.ai design system. Source of truth for brand values: src/design-system/brand/tokens.ts This file is the *consumable* semantic layer — what HTML/CSS imports. v1.1 (token-cleanup pass) ────────────────────────── • Removed unused/parallel tokens (--surface, --brand-text-*). • Differentiated --border-subtle vs --border-default. • Fixed --interactive-primary-active to ember-deep. • Status-subtle tokens now share one convention (20% alpha overlay). • --brand-border rest opacity bumped 0.04 → 0.08 (visible). • --surface-elevated stepped up from --surface-muted (+3% luminance). • Added spring easing presets (CSS approximations of brand springs). • Added .focus-ring utility. • Renamed elevation concept to "ring elevation" (1px outer ring; drop-shadows are forbidden except ember glow on interactive). • Light-theme chrome gradient retuned for "warm copper-ink" cast. • Added named space tokens (--space-px, --space-half, --space-1, …) mirroring the 8px grid; numbered tokens kept for back-compat. ============================================================ */ /* Fonts — self-hosted via next/font/google in production. For prototypes, fall back to Google Fonts CDN. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Base family ─────────────────────────────────────────── */ --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-code: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-optical-sizing: auto; /* ── Brand palette ───────────────────────────────────────── */ --void: #08080d; /* deepest background */ /* Chrome stops (for metallic gradients on dark bg) */ --chrome-1: #ffffff; --chrome-2: #e8e8e8; --chrome-3: #a0a0a0; --chrome-4: #d0d0d0; --chrome-5: #f5f5f5; /* Ember (interactive-only) */ --ember: #FF7F50; --ember-light: #FFB088; --ember-highlight: #FFD4B8; --ember-deep: #CC5530; /* Ember borders — interactive progression (rest / hover / active) */ --brand-border: rgba(255,127,80,0.08); --brand-border-hover: rgba(255,127,80,0.16); --brand-border-active: rgba(255,127,80,0.24); /* ── Chrome gradients ────────────────────────────────────── */ --chrome-gradient-dark: linear-gradient(180deg, #ffffff 0%, #e8e8e8 22%, #a0a0a0 48%, #d0d0d0 72%, #f5f5f5 100%); /* Light variant: warm copper-ink — ties chrome to the ember palette instead of reading as cold dark-grey on paper. */ --chrome-gradient-light: linear-gradient(180deg, #1A1A1A 0%, #3D3027 30%, #6B5B4D 50%, #3D3027 70%, #1A1A1A 100%); --dot-gradient: radial-gradient(circle at 50% 38%, #FFD4B8, #FF7F50 40%, #CC5530); /* ── Semantic tokens — DARK (default) ────────────────────── */ --surface-default: #0A0A0A; --surface-subtle: #141414; --surface-muted: #161616; --surface-elevated: #1A1A1A; /* +3% luminance over muted */ --surface-overlay: rgba(10,10,10,0.85); --surface-inverse: #F5F5F7; --content-default: #F5F5F7; --content-subtle: #CCCCCC; --content-muted: #999999; --content-inverse: #0A0A0A; --content-on-primary: #0A0A0A; /* text on ember-orange */ --interactive-primary: #FF7F50; --interactive-primary-hover: #FF9066; --interactive-primary-active: #CC5530; /* ember-deep */ --interactive-secondary: #7FDBFF; --interactive-accent: #7FDBFF; /* Borders — default is a hairline grey, subtle is alpha-on-surface */ --border-default: #2A2A2E; --border-subtle: rgba(255,255,255,0.06); --border-strong: #FF7F50; --border-focus: #FF7F50; /* Status — solid foreground + 20% alpha overlay subtle */ --status-success: #4CAF50; --status-error: #F44336; --status-warning: #FFB400; --status-info: #7FDBFF; --status-success-subtle: rgba(76,175,80,0.20); --status-warning-subtle: rgba(255,180,0,0.20); --status-error-subtle: rgba(244,67,54,0.20); --status-info-subtle: rgba(127,219,255,0.20); /* Glass */ --glass-bg: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.06); --glass-bg-strong: rgba(255,255,255,0.06); --glass-border-strong: rgba(255,255,255,0.10); --glass-blur: 16px; /* ── Shadows — ember glow (interactive only) ─────────────── */ --shadow-warm-hover: 0 8px 32px rgba(255,127,80,0.06); --shadow-warm-glow: 0 0 12px rgba(255,127,80,0.3), 0 0 24px rgba(255,127,80,0.15); --shadow-dot-glow: 0 0 8px #FF7F50, 0 0 16px rgba(255,127,80,0.3); /* ── Ring elevation — replaces drop shadows on neutral surfaces. 1px outer ring at 3% white per level. No vertical offset, no blur — luminance is the lift cue, not a shadow. */ --elev-1: 0 0 0 1px rgba(255,255,255,0.03); --elev-2: 0 0 0 1px rgba(255,255,255,0.06); --elev-3: 0 0 0 1px rgba(255,255,255,0.09); --elev-4: 0 0 0 1px rgba(255,255,255,0.12); --elev-5: 0 0 0 1px rgba(255,255,255,0.15); /* ── Radius ──────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* ── Spacing — 8px grid, half-grid (4px) allowed ────────── Tokens follow the 8px-multiple numbering (token N == N × 8px), mirroring `gridSpacing` in tokens.ts. Half-grid keys use `-half` suffix. Older `--space-N-M` names are kept as aliases. */ --space-0: 0px; --space-half: 4px; /* half-grid — compact elements only */ --space-1: 8px; --space-1-half:12px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; /* Back-compat aliases (older 4px-base numbering) — DO NOT add new. */ --space-0-5: 4px; /* == --space-half */ --space-1-5: 12px; /* == --space-1-half */ --space-16: 64px; /* == --space-8 */ --space-20: 80px; /* == --space-10 */ --space-24: 96px; /* == --space-12 */ /* ── Motion ──────────────────────────────────────────────── */ --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-standard: cubic-bezier(0.2, 0, 0, 1); /* CSS approximations of the four named brand springs (tokens.ts). Use these on hover/press; the real springs run via JS in prod. */ --ease-spring-gentle: cubic-bezier(0.34, 1.20, 0.64, 1.00); --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1.00); --ease-spring-dramatic: cubic-bezier(0.20, 1.40, 0.30, 1.00); --ease-spring-elastic: cubic-bezier(0.30, 1.80, 0.40, 0.95); --motion-fast: 150ms; --motion-normal: 250ms; --motion-slow: 350ms; --motion-emphasized: 500ms; /* ── Z-index ─────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; } /* ── Light theme overrides ───────────────────────────────────── */ [data-theme-mode="light"] { --surface-default: #FAFAF8; --surface-subtle: #F2F2F0; --surface-muted: #FFFFFF; --surface-elevated: #FFFFFF; --surface-overlay: rgba(250,250,248,0.90); --surface-inverse: #1A1A1A; --content-default: #1A1A1A; --content-subtle: #2D2D2D; --content-muted: #515154; --content-inverse: #FAFAF8; --content-on-primary: #FAFAF8; --interactive-secondary: #4A90E2; --interactive-accent: #4A90E2; --border-default: #E0E0E2; --border-subtle: rgba(0,0,0,0.06); --status-success: #34C759; --status-error: #FF3B30; --status-warning: #FF9500; --status-info: #007AFF; --status-success-subtle: rgba(52,199,89,0.18); --status-warning-subtle: rgba(255,149,0,0.18); --status-error-subtle: rgba(255,59,48,0.18); --status-info-subtle: rgba(0,122,255,0.18); --glass-bg: rgba(0,0,0,0.02); --glass-border: rgba(0,0,0,0.06); --glass-bg-strong: rgba(0,0,0,0.04); --glass-border-strong: rgba(0,0,0,0.10); --elev-1: 0 0 0 1px rgba(0,0,0,0.03); --elev-2: 0 0 0 1px rgba(0,0,0,0.06); --elev-3: 0 0 0 1px rgba(0,0,0,0.09); --elev-4: 0 0 0 1px rgba(0,0,0,0.12); --elev-5: 0 0 0 1px rgba(0,0,0,0.15); } /* ============================================================ Typography — base + semantic From typeScale in src/design-system/tokens/semantic.ts ============================================================ */ html, body { font-family: var(--font-ui); color: var(--content-default); background: var(--surface-default); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display */ .t-display-lg { font-size: 3rem; font-weight: 700; line-height: 1.10; letter-spacing: -0.025em; } .t-display-md { font-size: 2.25rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; } .t-display-sm { font-size: 1.875rem; font-weight: 600; line-height: 1.20; letter-spacing: -0.015em; } /* Headlines */ .t-headline-lg { font-size: 1.5rem; font-weight: 600; line-height: 1.30; letter-spacing: -0.01em; } .t-headline-md { font-size: 1.25rem; font-weight: 600; line-height: 1.35; } .t-headline-sm { font-size: 1.125rem; font-weight: 600; line-height: 1.40; } /* Titles (emphasis body) */ .t-title-lg { font-size: 1.125rem; font-weight: 500; line-height: 1.40; } .t-title-md { font-size: 1rem; font-weight: 500; line-height: 1.50; letter-spacing: 0.01em; } .t-title-sm { font-size: 0.875rem; font-weight: 500; line-height: 1.50; letter-spacing: 0.01em; } /* Body */ .t-body-lg { font-size: 1rem; font-weight: 400; line-height: 1.60; } .t-body-md { font-size: 0.875rem; font-weight: 400; line-height: 1.50; letter-spacing: 0.01em; } .t-body-sm { font-size: 0.75rem; font-weight: 400; line-height: 1.50; letter-spacing: 0.02em; } /* Labels (caps-adjacent, uppercase optional) */ .t-label-lg { font-size: 0.875rem; font-weight: 500; line-height: 1.40; letter-spacing: 0.02em; } .t-label-md { font-size: 0.75rem; font-weight: 500; line-height: 1.40; letter-spacing: 0.03em; } .t-label-sm { font-size: 0.6875rem; font-weight: 500; line-height: 1.40; letter-spacing: 0.04em; } /* Mono */ .t-code { font-family: var(--font-code); font-size: 0.875rem; font-weight: 400; } /* ── Semantic element styling (defaults) ─────────────────────── */ h1 { font-size: 3rem; font-weight: 700; line-height: 1.10; letter-spacing: -0.025em; margin: 0; } h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; margin: 0; } h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.30; letter-spacing: -0.01em; margin: 0; } h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: 0; } h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.40; margin: 0; } h6 { font-size: 1rem; font-weight: 600; line-height: 1.50; margin: 0; } p { margin: 0; } code, pre, kbd { font-family: var(--font-code); } /* ── Brand treatments ────────────────────────────────────────── */ /* Chrome text — metallic gradient fill, display-level only */ .chrome-text { background-image: var(--chrome-gradient-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-theme-mode="light"] .chrome-text { background-image: var(--chrome-gradient-light); } /* Glass surface — base panel treatment */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); border: 1px solid var(--glass-border); } .glass-strong { background: var(--glass-bg-strong); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border: 1px solid var(--glass-border-strong); } /* Ember glow utilities — interactive focus/hover only. Maps: .glow-sm = focus ring/active (subtle) .glow-md = primary button hover, focused CTA (moderate) .glow-lg = hero CTA, dramatic emphasis (loud — use sparingly) */ .glow-sm { box-shadow: 0 0 10px color-mix(in srgb, var(--interactive-primary) 20%, transparent), 0 0 20px color-mix(in srgb, var(--interactive-primary) 10%, transparent); } .glow-md { box-shadow: 0 0 15px color-mix(in srgb, var(--interactive-primary) 25%, transparent), 0 0 30px color-mix(in srgb, var(--interactive-primary) 15%, transparent), 0 0 45px color-mix(in srgb, var(--interactive-primary) 5%, transparent); } .glow-lg { box-shadow: 0 0 20px color-mix(in srgb, var(--interactive-primary) 30%, transparent), 0 0 40px color-mix(in srgb, var(--interactive-primary) 20%, transparent), 0 0 60px color-mix(in srgb, var(--interactive-primary) 10%, transparent); } /* ============================================================ Brand motion utilities ============================================================ */ /* voidEmerge — signature entrance. y:20 + scale:0.98 + blur(4) → clear · gentle spring. Apply via .voidEmerge or .voidEmerge--deep (hero variant). */ @keyframes voidEmerge { from { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes voidEmergeDeep { from { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .voidEmerge { animation: voidEmerge 700ms var(--ease-spring-gentle) both; } .voidEmerge--deep{ animation: voidEmergeDeep 900ms var(--ease-spring-gentle) both; } /* Stagger helper — apply --stagger:50ms to a flex/grid parent and the children get delays 0, 50, 100, 150, … (caps at 8 to avoid creep). */ .voidEmerge--stagger > * { animation: voidEmerge 700ms var(--ease-spring-gentle) both; } .voidEmerge--stagger > *:nth-child(1) { animation-delay: calc(var(--stagger, 60ms) * 0); } .voidEmerge--stagger > *:nth-child(2) { animation-delay: calc(var(--stagger, 60ms) * 1); } .voidEmerge--stagger > *:nth-child(3) { animation-delay: calc(var(--stagger, 60ms) * 2); } .voidEmerge--stagger > *:nth-child(4) { animation-delay: calc(var(--stagger, 60ms) * 3); } .voidEmerge--stagger > *:nth-child(5) { animation-delay: calc(var(--stagger, 60ms) * 4); } .voidEmerge--stagger > *:nth-child(6) { animation-delay: calc(var(--stagger, 60ms) * 5); } .voidEmerge--stagger > *:nth-child(7) { animation-delay: calc(var(--stagger, 60ms) * 6); } .voidEmerge--stagger > *:nth-child(8) { animation-delay: calc(var(--stagger, 60ms) * 7); } .voidEmerge--stagger > *:nth-child(n+9){ animation-delay: calc(var(--stagger, 60ms) * 8); } /* Chrome breathe — slow highlight-band drift across display text. */ @keyframes chromeBreathe { 0%, 100% { background-position: 35% 50%; } 50% { background-position: 65% 50%; } } .chrome-text.chrome-breathe { background-size: 220% 100%; animation: chromeBreathe 11s ease-in-out infinite; } /* Ember ignite — brief flash on press (button ignition arc). */ @keyframes emberIgnite { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--interactive-primary) 60%, transparent), 0 0 10px color-mix(in srgb, var(--interactive-primary) 25%, transparent); } 60% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--interactive-primary) 0%, transparent), 0 0 28px color-mix(in srgb, var(--interactive-primary) 10%, transparent); } 100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--interactive-primary) 0%, transparent), 0 0 0 color-mix(in srgb, var(--interactive-primary) 0%, transparent); } } /* Ember halo — gentle infinite breathe on status indicators. */ @keyframes emberHalo { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); } } /* Reduced-motion guarantee */ @media (prefers-reduced-motion: reduce) { .voidEmerge, .voidEmerge--deep, .voidEmerge--stagger > *, .chrome-text.chrome-breathe { animation: none !important; } } /* Focus ring — single canonical focus treatment. Applies to any element; preferred over per-component focus styles. */ .focus-ring, :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: inherit; } /* Soft focus ring — for elements that look better with a glow than a hard outline (chips, search inputs, glass surfaces). Pair with .focus-ring only if you want both. */ .focus-ring-soft:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--border-focus), 0 0 12px color-mix(in srgb, var(--interactive-primary) 30%, transparent), 0 0 24px color-mix(in srgb, var(--interactive-primary) 15%, transparent); }