:root {
  /* Color — cinematic dark identity */
  --bg-0: #000000;
  --bg-50: #0a0a0b;
  --bg-100: #141416;
  --bg-200: #1f1f23;
  --bg-300: #2a2a30;
  --bg-400: #3a3a42;
  --bg-500: #4d4d57;

  --tx-1: #ffffff;
  --tx-2: #c7c7cf;
  --tx-3: #8e8e99;
  --tx-inv: #0a0a0b;

  --brand-300: #ff6b74;
  --brand-400: #f23b46;
  --brand-500: #e50914;
  --brand-600: #c70810;
  --brand-700: #9d060c;
  --brand-glow: rgba(229, 9, 20, 0.42);
  --brand-glow-strong: rgba(229, 9, 20, 0.65);

  --ok: #46d369;
  --warn: #ffb800;

  --line-subtle: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.24);
  --glass: rgba(28, 28, 32, 0.72);
  --glass-strong: rgba(12, 12, 14, 0.86);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  --grad-fade-b: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 82%, var(--bg-0) 100%);
  --grad-fade-t: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 26%, rgba(0,0,0,0) 48%);
  --grad-card-shine: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 38%);

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.78125rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-hero-min: 2rem;
  --fs-hero-max: 4.25rem;

  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-xbold: 800;
  --w-black: 900;

  /* Space & shape */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* Elevation */
  --sh-1: 0 2px 8px rgba(0,0,0,.45);
  --sh-2: 0 8px 24px rgba(0,0,0,.55);
  --sh-3: 0 16px 48px rgba(0,0,0,.65);
  --sh-focus: 0 0 0 3px var(--bg-0), 0 0 0 6px var(--brand-500);
  --sh-tv-focus: 0 0 0 4px var(--bg-0), 0 0 0 8px var(--brand-500), 0 0 42px var(--brand-glow-strong);

  /* Motion */
  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t-med: 260ms cubic-bezier(.4,0,.2,1);
  --t-slow: 420ms cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --gutter: clamp(20px, 3.2vw, 56px);
  --header-h: 68px;
  --bottomnav-h: 0px;
  --rail-gap: 14px;
  --cpv: 6;
  --cpvw: 3.4;
  --gcols: 5;
  --safe-l: 0px;
  --safe-r: 0px;
  --safe-b: 0px;

  /* Z */
  --z-header: 100;
  --z-drawer: 300;
  --z-search: 400;
  --z-player: 600;
  --z-modal: 700;
  --z-toast: 900;
}

html[data-theme="light"] {
  --bg-0: #f4f4f6;
  --bg-50: #ffffff;
  --bg-100: #ececef;
  --bg-200: #dfdfe4;
  --bg-300: #cfcfd6;
  --bg-400: #b9b9c2;
  --bg-500: #9a9aa5;
  --tx-1: #101014;
  --tx-2: #3d3d46;
  --tx-3: #71717c;
  --tx-inv: #ffffff;
  --line-subtle: rgba(0,0,0,.08);
  --line: rgba(0,0,0,.14);
  --line-strong: rgba(0,0,0,.26);
  --glass: rgba(255,255,255,.78);
  --glass-strong: rgba(250,250,252,.92);
  --grad-fade-b: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(244,244,246,.65) 55%, rgba(244,244,246,.95) 85%, var(--bg-0) 100%);
  --grad-fade-t: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,0) 50%);
}