/* ============================================================
   JFlix Design Tokens — Single Source of Truth
   Import FIRST in all stylesheets: @import 'tokens.css';
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand Colors ── */
  --brand: #e50914;
  --brand-dark: #b20710;
  --brand-light: #ff3b3b;
  --brand-glow: rgba(229, 9, 20, 0.35);
  --brand-rgb: 229, 9, 20;

  --brand-anime: #8a70ff;
  --brand-korean: #ff4d94;
  --brand-movies: #e50914;
  --brand-tv: #0084ff;
  --brand-cartoon: #ffaa00;

  /* Legacy Compatibility Aliases */
  --primary-color: var(--brand);
  --primary-color-rgb: 229, 9, 20;
  --primary-gradient: linear-gradient(135deg, #e50914 0%, #b20710 100%);
  --brand-gradient: linear-gradient(135deg, #ff2a35 0%, #b20710 100%);
  --secondary-color: var(--brand-tv);
  --background-color: var(--bg-0);
  --card-background: var(--bg-1);
  --card-background-hover: var(--bg-2);
  --text-color: var(--text-0);
  --text-secondary: var(--text-1);
  --text-muted: var(--text-2);
  --hover-color: var(--brand);
  --anime-color: var(--brand-anime);
  --korean-color: var(--brand-korean);
  --movies-color: var(--brand-movies);
  --tvshows-color: var(--brand-tv);
  --cartoon-color: var(--brand-cartoon);

  /* ── Semantic Colors ── */
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #e74c3c;
  --info: #4a90e2;

  /* ── Neutral Scale (Cinematic Dark Theme) ── */
  --bg-0: #08080d;           /* Deep cinematic canvas */
  --bg-1: #10111a;           /* Elevated card surface */
  --bg-2: #181928;           /* Hover / interactive */
  --bg-3: #222336;           /* Input / active */
  --bg-glass: rgba(16, 17, 26, 0.75);
  --bg-glass-card: rgba(24, 25, 40, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);

  --text-0: #ffffff;         /* Primary */
  --text-1: #c4c5d6;         /* Secondary */
  --text-2: #8a8c9e;         /* Muted */
  --text-3: #585a6e;         /* Disabled / placeholder */

  --border-0: rgba(255,255,255,0.06);
  --border-1: rgba(255,255,255,0.12);
  --border-2: rgba(255,255,255,0.2);
  --border-focus: var(--brand);

  /* ── Spacing (4px base) ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* ── Typography ── */
  --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;

  --text-xs: 0.75rem;  --text-sm: 0.85rem;  --text-base: 0.95rem;
  --text-lg: 1.125rem; --text-xl: 1.35rem;  --text-2xl: 1.65rem;
  --text-3xl: 2.15rem; --text-4xl: 2.75rem;

  --font-light: 300;  --font-normal: 400;  --font-medium: 500;
  --font-semibold: 600; --font-bold: 700; --font-black: 900;

  --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.75;

  /* ── Radii ── */
  --radius-sm: 6px;    --radius-md: 10px;  --radius-lg: 14px;
  --radius-xl: 20px;   --radius-2xl: 28px; --radius-full: 9999px;

  /* ── Shadows (Layered Depth) ── */
  --shadow-0: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-1: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px var(--brand-glow);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.3);

  /* ── Motion ── */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);       /* Standard */
  --ease-out: cubic-bezier(0, 0.4, 0.2, 1);     /* Decelerate */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* Accelerate */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy */

  --dur-instant: 80ms;  --dur-fast: 120ms;  --dur-base: 200ms;
  --dur-slow: 350ms;    --dur-slower: 500ms;

  /* ── Z-Index Scale ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 500;
  --z-toast: 800;
  --z-tooltip: 1000;

  /* ── Layout Constants ── */
  --header-h: 56px;
  --header-h-lg: 64px;
  --sidebar-w: 260px;
  --sidebar-icon-w: 72px;
  --max-w: 1400px;
  --max-w-prose: 720px;

  /* ── Breakpoints (for reference, use @media) ── */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ── Light theme override (optional) ── */
@media (prefers-color-scheme: light) {
  :root[data-theme="light"] {
    --bg-0: #f8f9fb;  --bg-1: #ffffff;  --bg-2: #f0f2f5;  --bg-3: #e4e7ec;
    --text-0: #1a1a2e; --text-1: #4a4a5a; --text-2: #7a7a8a; --text-3: #a0a0b0;
    --border-0: rgba(0,0,0,0.06); --border-1: rgba(0,0,0,0.12);
    --shadow-0: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-1: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-2: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-3: 0 16px 40px rgba(0,0,0,0.15);
  }
}

/* ── High contrast mode ── */
@media (prefers-contrast: more) {
  :root {
    --border-0: rgba(255,255,255,0.2);
    --border-1: rgba(255,255,255,0.4);
    --text-1: #ddd; --text-2: #bbb;
  }
}