/* GENERATED from DESIGN.md — do not edit. Run: npm run design:tokens */ :root { --marketing-bg: #0C0907; --marketing-surface: #1A120C; --marketing-surface-2: #26180F; --marketing-text: #F3E6C8; --marketing-muted: #C47A52; --marketing-border: #4A2818; --marketing-accent: #E06A32; --marketing-accent-ink: #140E08; --replay-canvas: #FFFFFF; --primary: #1A140C; --on-primary: #F6EFE4; --secondary: #6B5640; --tertiary: #9A3412; --neutral: #F6EFE4; --surface: #FFF8EE; --surface-2: #F0E6D4; --surface-3: #E6D8C0; --on-surface: #1A140C; --on-surface-muted: #6B5640; --on-surface-faint: #8A7460; --border: #D8C8B0; --border-hover: #C4A888; --accent: #9A3412; --accent-hover: #7A2810; --accent-tint: #F6DED0; --accent-border: #C46840; --accent-ink: #FFF8EE; --error: #B3331D; --error-tint: #FBEAE5; --success: #1A7A43; --success-tint: #E7F2E9; --warning: #8A5A08; --warning-tint: #FBF2DC; --link: #0B5D87; --info: #0B5D87; --info-tint: #E4F0F8; --admin: #6D4796; --filament-glow: #9A341259; --bg: #F6EFE4; --text: #1A140C; --muted: #6B5640; --faint: #8A7460; --red: #B3331D; --green: #1A7A43; --yellow: #8A5A08; --orange: #8A5A08; --blue: #0B5D87; --purple: #6D4796; --border-strong: #C4A888; --shadow-card: 0 1px 2px rgba(33, 32, 28, 0.06); --shadow-raised: 0 4px 12px rgba(33, 32, 28, 0.10), 0 1px 3px rgba(33, 32, 28, 0.06); --shadow-float: 0 12px 32px rgba(33, 32, 28, 0.14), 0 2px 6px rgba(33, 32, 28, 0.08); --shadow-filament: 0 0 10px rgba(154, 52, 18, 0.28); --shadow-filament-nav: 0 0 12px rgba(154, 52, 18, 0.16); --shadow-cabinet-rim: inset 0 1px 0 rgba(154, 52, 18, 0.22); --shadow-dial-face: inset 0 0 0 4px #F0E6D4; --font-display: 'Oxanium', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-marketing: 'Oxanium', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-radio: 'Saira Extra Condensed', 'Oxanium', -apple-system, BlinkMacSystemFont, sans-serif; --motion-instant: 80ms; --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 300ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --rounded-xs: 4px; --rounded-sm: 6px; --rounded-md: 8px; --rounded-lg: 12px; --rounded-xl: 16px; --space-xs: 2px; --space-sm: 4px; --space-md: 6px; --space-lg: 8px; --space-xl: 12px; --space-2xl: 16px; --space-3xl: 24px; --space-section: 32px; --space-page: 48px; --space-page-lg: 64px; } /* Forced dark: */ [data-theme="dark"] { --marketing-bg: #0C0907; --marketing-surface: #1A120C; --marketing-surface-2: #26180F; --marketing-text: #F3E6C8; --marketing-muted: #C47A52; --marketing-border: #4A2818; --marketing-accent: #E06A32; --marketing-accent-ink: #140E08; --replay-canvas: #FFFFFF; --primary: #F3E6C8; --on-primary: #0C0907; --secondary: #C47A52; --tertiary: #E06A32; --neutral: #0C0907; --surface: #16110C; --surface-2: #22180F; --surface-3: #2E2014; --on-surface: #F3E6C8; --on-surface-muted: #C47A52; --on-surface-faint: #A86848; --border: #2E2014; --border-hover: #4A2818; --accent: #E06A32; --accent-hover: #F07C48; --accent-tint: #2A140E; --accent-border: #8A3C20; --accent-ink: #140E08; --error: #E06A52; --error-tint: #2E231E; --success: #83C8A5; --success-tint: #1D3028; --warning: #DCA85E; --warning-tint: #352E22; --link: #7FAFD4; --info: #7FAFD4; --info-tint: #2A2F30; --admin: #B795D6; --filament-glow: #E06A3273; --bg: #0C0907; --text: #F3E6C8; --muted: #C47A52; --faint: #A86848; --red: #E06A52; --green: #83C8A5; --yellow: #DCA85E; --orange: #DCA85E; --blue: #7FAFD4; --purple: #B795D6; --border-strong: #4A2818; --shadow-card: none; --shadow-raised: 0 8px 20px rgba(0, 0, 0, 0.35); --shadow-float: 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-filament: 0 0 12px rgba(224, 106, 50, 0.38); --shadow-filament-nav: 0 0 14px rgba(224, 106, 50, 0.24); --shadow-cabinet-rim: inset 0 1px 0 rgba(224, 106, 50, 0.28); --shadow-dial-face: inset 0 0 0 4px #22180F; } /* Auto: no data-theme attribute follows the OS. data-theme="light" forces light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --marketing-bg: #0C0907; --marketing-surface: #1A120C; --marketing-surface-2: #26180F; --marketing-text: #F3E6C8; --marketing-muted: #C47A52; --marketing-border: #4A2818; --marketing-accent: #E06A32; --marketing-accent-ink: #140E08; --replay-canvas: #FFFFFF; --primary: #F3E6C8; --on-primary: #0C0907; --secondary: #C47A52; --tertiary: #E06A32; --neutral: #0C0907; --surface: #16110C; --surface-2: #22180F; --surface-3: #2E2014; --on-surface: #F3E6C8; --on-surface-muted: #C47A52; --on-surface-faint: #A86848; --border: #2E2014; --border-hover: #4A2818; --accent: #E06A32; --accent-hover: #F07C48; --accent-tint: #2A140E; --accent-border: #8A3C20; --accent-ink: #140E08; --error: #E06A52; --error-tint: #2E231E; --success: #83C8A5; --success-tint: #1D3028; --warning: #DCA85E; --warning-tint: #352E22; --link: #7FAFD4; --info: #7FAFD4; --info-tint: #2A2F30; --admin: #B795D6; --filament-glow: #E06A3273; --bg: #0C0907; --text: #F3E6C8; --muted: #C47A52; --faint: #A86848; --red: #E06A52; --green: #83C8A5; --yellow: #DCA85E; --orange: #DCA85E; --blue: #7FAFD4; --purple: #B795D6; --border-strong: #4A2818; --shadow-card: none; --shadow-raised: 0 8px 20px rgba(0, 0, 0, 0.35); --shadow-float: 0 8px 20px rgba(0, 0, 0, 0.45); --shadow-filament: 0 0 12px rgba(224, 106, 50, 0.38); --shadow-filament-nav: 0 0 14px rgba(224, 106, 50, 0.24); --shadow-cabinet-rim: inset 0 1px 0 rgba(224, 106, 50, 0.28); --shadow-dial-face: inset 0 0 0 4px #22180F; } }