/**
 * Design tokens — Notion-inspired marketing UI
 * Themes: data-theme="light" (default) | "dark"
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  --tv-font-sans:
    Pretendard,
    "Noto Sans KR",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --tv-font-display: var(--tv-font-sans);

  --tv-bg: #ffffff;
  --tv-bg-elevated: #ffffff;
  --tv-bg-muted: #f4f5fc;
  --tv-bg-subtle: #f7f7f5;
  --tv-bg-invert: #191919;

  --tv-primary-surface: #f6f7ff;
  --tv-primary-surface-strong: #eef0fe;
  --tv-primary-border: rgba(95, 109, 244, 0.22);
  --tv-primary-border-hover: rgba(95, 109, 244, 0.42);
  --tv-primary-ring: rgba(95, 109, 244, 0.1);
  --tv-card-surface: linear-gradient(165deg, #ffffff 0%, #fafbff 48%, #f0f2fe 100%);
  --tv-card-surface-hover: linear-gradient(165deg, #ffffff 0%, #f5f6ff 40%, #e8ebfe 100%);

  --tv-text: #191919;
  --tv-text-muted: #6b6b6b;
  --tv-text-subtle: #6b6b6b;
  --tv-text-invert: #ffffff;

  --tv-border: rgba(0, 0, 0, 0.1);
  --tv-border-strong: rgba(0, 0, 0, 0.14);

  --tv-accent: #191919;
  --tv-accent-soft: #f0f0ee;

  --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 1px 2px rgba(0, 0, 0, 0.04), 0 16px 48px rgba(0, 0, 0, 0.08);
  --tv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --tv-shadow-primary: 0 4px 14px rgba(95, 109, 244, 0.18);
  --tv-shadow-brand: 0 1px 2px rgba(95, 109, 244, 0.06), 0 16px 44px rgba(95, 109, 244, 0.12);

  --tv-grid-line: rgba(95, 109, 244, 0.04);
  --tv-hero-glow: rgba(95, 109, 244, 0.14);

  --tv-glass-bg: rgba(255, 255, 255, 0.9);
  --tv-glass-bg-strong: rgba(255, 255, 255, 0.92);
  --tv-glass-border: rgba(0, 0, 0, 0.06);
  --tv-glass-border-outer: rgba(0, 0, 0, 0.06);
  --tv-glass-highlight: transparent;
  --tv-glass-blur: 12px;
  --tv-glass-saturate: 1;
  --tv-glass-shadow: none;
  --tv-glass-shadow-lg: var(--tv-shadow-sm);
  --tv-mesh-bg:
    radial-gradient(ellipse 90% 60% at 8% -10%, rgba(95, 109, 244, 0.09), transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 0%, rgba(139, 93, 222, 0.06), transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(95, 109, 244, 0.05), transparent 55%);

  --tv-panel-bg: var(--tv-bg-muted);
  --tv-panel-fg: var(--tv-text);
  --tv-panel-fg-muted: var(--tv-text-muted);
  --tv-panel-card-bg: var(--tv-bg-elevated);
  --tv-panel-card-border: var(--tv-border);
  --tv-mock-chrome-bg: #ffffff;
  --tv-mock-chrome-fg: #191919;
  --tv-mock-chrome-border: var(--tv-border);
  --tv-mock-panel-bg: var(--tv-primary-surface);
  --tv-mock-panel-border: var(--tv-primary-border);
  --tv-mock-row-bg: var(--tv-accent-soft);

  --tv-btn-primary-bg: #5f6df4;
  --tv-btn-primary-hover: #4f5ce8;
  --tv-btn-primary-fg: #ffffff;
}

[data-theme="dark"] {
  color-scheme: dark;

  --tv-bg: #111111;
  --tv-bg-elevated: #1a1a1a;
  --tv-bg-muted: #1f1f1f;
  --tv-bg-subtle: #1f1f1f;
  --tv-bg-invert: #f5f5f5;

  --tv-primary-surface: #1a1c2e;
  --tv-primary-surface-strong: #22253a;
  --tv-primary-border: rgba(129, 140, 248, 0.28);
  --tv-primary-border-hover: rgba(129, 140, 248, 0.48);
  --tv-primary-ring: rgba(129, 140, 248, 0.14);
  --tv-card-surface: linear-gradient(165deg, #1a1a1a 0%, #1c1f32 55%, #22253a 100%);
  --tv-card-surface-hover: linear-gradient(165deg, #1f1f1f 0%, #232640 50%, #2a2e45 100%);

  --tv-text: #f5f5f5;
  --tv-text-muted: #a3a3a3;
  --tv-text-subtle: #a3a3a3;
  --tv-text-invert: #191919;

  --tv-border: rgba(255, 255, 255, 0.1);
  --tv-border-strong: rgba(255, 255, 255, 0.16);

  --tv-accent: #f5f5f5;
  --tv-accent-soft: #2a2a2a;

  --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-hero-glow: rgba(129, 140, 248, 0.2);
  --tv-mesh-bg:
    radial-gradient(ellipse 90% 60% at 8% -10%, rgba(129, 140, 248, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 0%, rgba(139, 93, 222, 0.08), transparent 50%);
  --tv-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 16px 48px rgba(0, 0, 0, 0.35);
  --tv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.25);
  --tv-shadow-primary: none;

  --tv-glass-bg: rgba(26, 26, 26, 0.9);
  --tv-glass-bg-strong: rgba(26, 26, 26, 0.94);
  --tv-glass-border-outer: rgba(255, 255, 255, 0.08);

  --tv-panel-bg: var(--tv-bg-muted);
  --tv-panel-fg: var(--tv-text);
  --tv-panel-fg-muted: var(--tv-text-muted);
  --tv-panel-card-bg: var(--tv-bg-elevated);
  --tv-panel-card-border: var(--tv-border);

  --tv-mock-chrome-bg: #1a1a1a;
  --tv-mock-chrome-fg: #f5f5f5;
  --tv-mock-panel-bg: #141414;

  --tv-btn-primary-bg: #5f6df4;
  --tv-btn-primary-hover: #707ef5;
  --tv-btn-primary-fg: #ffffff;
}

:root {
  --tv-radius-sm: 8px;
  --tv-radius: 8px;
  --tv-radius-lg: 16px;
  --tv-radius-xl: 24px;
  --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: 6rem;

  --tv-max: 75rem;
  --tv-max-narrow: 48rem;
  --tv-prose: 38.75rem;

  --tv-text-xs: 0.8125rem;
  --tv-text-sm: 0.9375rem;
  --tv-text-base: 1rem;
  --tv-text-lg: 1.125rem;
  --tv-text-xl: 1.25rem;
  --tv-display: clamp(2.625rem, 6vw, 4.5rem);
  --tv-display-sm: clamp(2rem, 4vw, 3.25rem);

  --tv-header-h: 4rem;
  --tv-transition: 150ms ease;

  --tv-btn-outline-border: #5f6df4;

  --tv-primary-gradient: linear-gradient(135deg, #5f6df4 0%, #8b5dce 100%);
}