/** * Design tokens — switch themes via data-theme on * light (default) | dark | midnight */ :root, [data-theme="light"] { color-scheme: light; --tv-font-sans: "DM Sans", "Noto Sans KR", system-ui, sans-serif; --tv-font-display: "DM Sans", "Noto Sans KR", system-ui, sans-serif; --tv-bg: #fafaf9; --tv-bg-elevated: #ffffff; --tv-bg-muted: #f4f4f5; --tv-bg-invert: #18181b; --tv-text: #18181b; --tv-text-muted: #52525b; --tv-text-subtle: #71717a; --tv-text-invert: #fafafa; --tv-border: rgba(24, 24, 27, 0.1); --tv-border-strong: rgba(24, 24, 27, 0.18); --tv-accent: #3f3f46; --tv-accent-soft: #e4e4e7; --tv-primary: #5f6df4; --tv-primary-hover: #4f5ce8; --tv-primary-soft: #eef0fe; --tv-primary-muted: #5f6df4; --tv-primary-foreground: #ffffff; --tv-focus: #5f6df4; --tv-shadow: 0 24px 60px -16px rgba(24, 24, 27, 0.12); --tv-shadow-sm: 0 8px 30px -8px rgba(24, 24, 27, 0.08); --tv-shadow-primary: 0 12px 32px -8px rgba(95, 109, 244, 0.35); --tv-grid-line: rgba(24, 24, 27, 0.04); --tv-hero-glow: rgba(95, 109, 244, 0.14); --tv-glass-bg: rgba(255, 255, 255, 0.82); --tv-glass-bg-strong: rgba(255, 255, 255, 0.92); --tv-glass-border: rgba(255, 255, 255, 0.85); --tv-glass-border-outer: rgba(24, 24, 27, 0.1); --tv-glass-highlight: rgba(255, 255, 255, 0.98); --tv-glass-blur: 20px; --tv-glass-saturate: 1.4; --tv-glass-shadow: 0 8px 32px rgba(24, 24, 27, 0.08), inset 0 1px 0 var(--tv-glass-highlight); --tv-glass-shadow-lg: 0 20px 50px -12px rgba(95, 109, 244, 0.16), inset 0 1px 0 var(--tv-glass-highlight); --tv-mesh-bg: radial-gradient(ellipse 110% 90% at 8% -15%, rgba(95, 109, 244, 0.14), transparent 52%), radial-gradient(ellipse 85% 70% at 95% 5%, rgba(139, 93, 222, 0.1), transparent 48%), radial-gradient(ellipse 70% 55% at 50% 105%, rgba(95, 109, 244, 0.08), transparent 55%); --tv-panel-bg: linear-gradient(155deg, #1a1a22 0%, #2a2540 48%, #14141a 100%); --tv-panel-fg: #f4f4f5; --tv-panel-fg-muted: rgba(244, 244, 245, 0.72); --tv-panel-card-bg: rgba(255, 255, 255, 0.09); --tv-panel-card-border: rgba(255, 255, 255, 0.14); --tv-mock-chrome-bg: #ffffff; --tv-mock-chrome-fg: #27272a; --tv-mock-chrome-border: rgba(24, 24, 27, 0.1); --tv-mock-panel-bg: #eef0fe; --tv-mock-panel-border: rgba(95, 109, 244, 0.16); --tv-mock-row-bg: rgba(95, 109, 244, 0.2); } [data-theme="dark"] { color-scheme: dark; --tv-bg: #09090b; --tv-bg-elevated: #18181b; --tv-bg-muted: #27272a; --tv-bg-invert: #fafafa; --tv-text: #fafafa; --tv-text-muted: #a1a1aa; --tv-text-subtle: #71717a; --tv-text-invert: #18181b; --tv-border: rgba(255, 255, 255, 0.08); --tv-border-strong: rgba(255, 255, 255, 0.14); --tv-accent: #e4e4e7; --tv-accent-soft: #3f3f46; --tv-primary: #8b93f8; --tv-primary-hover: #9da4fa; --tv-primary-soft: rgba(95, 109, 244, 0.16); --tv-primary-muted: #a5abf8; --tv-primary-foreground: #ffffff; --tv-focus: #8b93f8; --tv-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45); --tv-shadow-sm: 0 8px 30px -8px rgba(0, 0, 0, 0.35); --tv-shadow-primary: 0 12px 32px -8px rgba(95, 109, 244, 0.28); --tv-grid-line: rgba(255, 255, 255, 0.05); --tv-hero-glow: rgba(95, 109, 244, 0.2); --tv-glass-bg: rgba(24, 24, 27, 0.42); --tv-glass-bg-strong: rgba(39, 39, 42, 0.58); --tv-glass-border: rgba(255, 255, 255, 0.14); --tv-glass-border-outer: rgba(255, 255, 255, 0.08); --tv-glass-highlight: rgba(255, 255, 255, 0.12); --tv-glass-blur: 24px; --tv-glass-saturate: 1.5; --tv-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 var(--tv-glass-highlight); --tv-glass-shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--tv-glass-highlight); --tv-mesh-bg: radial-gradient(ellipse 100% 85% at 5% -10%, rgba(95, 109, 244, 0.28), transparent 50%), radial-gradient(ellipse 80% 65% at 100% 15%, rgba(139, 93, 222, 0.2), transparent 45%), radial-gradient(ellipse 65% 50% at 45% 100%, rgba(95, 109, 244, 0.14), transparent 50%); --tv-panel-bg: linear-gradient(155deg, #121218 0%, #1f1c30 50%, #0e0e14 100%); --tv-panel-fg: #f4f4f5; --tv-panel-fg-muted: rgba(244, 244, 245, 0.72); --tv-panel-card-bg: rgba(255, 255, 255, 0.08); --tv-panel-card-border: rgba(255, 255, 255, 0.12); --tv-mock-chrome-bg: #18181b; --tv-mock-chrome-fg: #fafafa; --tv-mock-chrome-border: rgba(255, 255, 255, 0.12); --tv-mock-panel-bg: rgba(255, 255, 255, 0.07); --tv-mock-panel-border: rgba(255, 255, 255, 0.12); --tv-mock-row-bg: rgba(255, 255, 255, 0.2); } [data-theme="midnight"] { color-scheme: dark; --tv-bg: #0c1222; --tv-bg-elevated: #131b2e; --tv-bg-muted: #1a2438; --tv-bg-invert: #f8fafc; --tv-text: #f1f5f9; --tv-text-muted: #94a3b8; --tv-text-subtle: #64748b; --tv-text-invert: #0f172a; --tv-border: rgba(148, 163, 184, 0.12); --tv-border-strong: rgba(148, 163, 184, 0.22); --tv-accent: #cbd5e1; --tv-accent-soft: #1e293b; --tv-primary: #818cf8; --tv-primary-hover: #9399fa; --tv-primary-soft: rgba(99, 102, 241, 0.18); --tv-primary-muted: #a5b4fc; --tv-primary-foreground: #ffffff; --tv-focus: #818cf8; --tv-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.5); --tv-shadow-sm: 0 8px 30px -8px rgba(0, 0, 0, 0.4); --tv-shadow-primary: 0 12px 32px -8px rgba(99, 102, 241, 0.32); --tv-grid-line: rgba(148, 163, 184, 0.06); --tv-hero-glow: rgba(99, 102, 241, 0.22); --tv-glass-bg: rgba(19, 27, 46, 0.48); --tv-glass-bg-strong: rgba(26, 36, 56, 0.62); --tv-glass-border: rgba(148, 163, 184, 0.18); --tv-glass-border-outer: rgba(148, 163, 184, 0.1); --tv-glass-highlight: rgba(255, 255, 255, 0.1); --tv-glass-blur: 24px; --tv-glass-saturate: 1.55; --tv-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 var(--tv-glass-highlight); --tv-glass-shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--tv-glass-highlight); --tv-mesh-bg: radial-gradient(ellipse 100% 85% at 10% -5%, rgba(99, 102, 241, 0.32), transparent 52%), radial-gradient(ellipse 75% 60% at 90% 20%, rgba(139, 93, 222, 0.22), transparent 48%), radial-gradient(ellipse 60% 45% at 50% 100%, rgba(56, 189, 248, 0.1), transparent 55%); --tv-panel-bg: linear-gradient(155deg, #0f1424 0%, #1a2240 50%, #0a0f1a 100%); --tv-panel-fg: #f1f5f9; --tv-panel-fg-muted: rgba(241, 245, 249, 0.72); --tv-panel-card-bg: rgba(255, 255, 255, 0.07); --tv-panel-card-border: rgba(255, 255, 255, 0.11); --tv-mock-chrome-bg: #131b2e; --tv-mock-chrome-fg: #f1f5f9; --tv-mock-chrome-border: rgba(148, 163, 184, 0.14); --tv-mock-panel-bg: rgba(255, 255, 255, 0.06); --tv-mock-panel-border: rgba(148, 163, 184, 0.14); --tv-mock-row-bg: rgba(255, 255, 255, 0.18); } /* Shared scale (all themes) */ :root { --tv-radius-sm: 0.5rem; --tv-radius: 0.75rem; --tv-radius-lg: 1rem; --tv-radius-xl: 1.25rem; --tv-radius-full: 9999px; --tv-space-1: 0.25rem; --tv-space-2: 0.5rem; --tv-space-3: 0.75rem; --tv-space-4: 1rem; --tv-space-5: 1.25rem; --tv-space-6: 1.5rem; --tv-space-8: 2rem; --tv-space-10: 2.5rem; --tv-space-12: 3rem; --tv-space-16: 4rem; --tv-space-20: 5rem; --tv-space-28: 7rem; --tv-max: 72rem; --tv-max-narrow: 48rem; --tv-text-xs: 0.6875rem; --tv-text-sm: 0.8125rem; --tv-text-base: 1rem; --tv-text-lg: 1.125rem; --tv-text-xl: 1.25rem; --tv-display: clamp(2.25rem, 4vw, 3.25rem); --tv-display-sm: clamp(1.75rem, 3vw, 2.5rem); --tv-header-h: 4rem; --tv-transition: 180ms ease; --tv-primary-gradient: linear-gradient(135deg, #5f6df4 0%, #8b5dce 100%); }