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

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

  --brand-anime: #7b68ee;
  --brand-korean: #ff69b4;
  --brand-movies: #e50914;
  --brand-tv: #0071eb;
  --brand-cartoon: #ff9900;

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

  /* Brand RGB for rgba() usage */
  --brand-rgb: 229, 9, 20;

  /* ── Neutral Scale (Dark Theme) ── */
  --bg-0: #0a0a12;           /* Page base */
  --bg-1: #121220;           /* Card surface */
  --bg-2: #1a1a2e;           /* Elevated / hover */
  --bg-3: #242438;           /* Input / active */

  --text-0: #ffffff;         /* Primary */
  --text-1: #b8b8c8;         /* Secondary */
  --text-2: #888898;         /* Muted */
  --text-3: #5a5a6a;         /* 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-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;

  --text-xs: 0.7rem;   --text-sm: 0.8rem;  --text-base: 0.95rem;
  --text-lg: 1.1rem;   --text-xl: 1.3rem;  --text-2xl: 1.6rem;
  --text-3xl: 2rem;    --text-4xl: 2.5rem;

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

  --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;
  }
}