/**
 * variables.css
 * Design tokens — the single source of truth for color, type, spacing,
 * radius, shadow, and motion timing. Every other CSS file reads from
 * these custom properties; none should hardcode raw values.
 *
 * Palette concept: a near-black "void" base with two competing neon
 * signals — cyan (system/primary actions) and magenta (personal data:
 * favorites, ratings, watched state) — plus violet as a connective
 * tertiary. This gives the UI a two-signal HUD feel rather than a
 * single generic accent color.
 */

:root {
  /* ---- Color: surfaces ---- */
  --bg-void: #07070d;         /* page background */
  --bg-surface: #0e0e1a;      /* base panel color before glass blur */
  --bg-elevated: #14142450;   /* semi-transparent, used with backdrop-filter */
  --bg-elevated-solid: #16162a; /* fallback for no-backdrop-filter support */

  /* ---- Color: neon signals ---- */
  --neon-cyan: #00f6ff;
  --neon-cyan-dim: #00b8c4;
  --neon-magenta: #ff2fd0;
  --neon-magenta-dim: #c221a3;
  --neon-violet: #8b5cf6;
  --neon-amber: #ffb020;      /* reserved: warnings / "dropped" status */

  /* ---- Color: text ---- */
  --text-primary: #eef0fb;
  --text-secondary: #9294b8;
  --text-muted: #5c5e7c;

  /* ---- Color: borders / glass ---- */
  --border-glass: rgba(148, 163, 255, 0.14);
  --border-glass-hover: rgba(0, 246, 255, 0.4);

  /* ---- Glow shadows ---- */
  --glow-cyan: 0 0 12px rgba(0, 246, 255, 0.45), 0 0 2px rgba(0, 246, 255, 0.8);
  --glow-magenta: 0 0 12px rgba(255, 47, 208, 0.45), 0 0 2px rgba(255, 47, 208, 0.8);
  --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.45);

  /* ---- Typography ---- */
  --font-display: 'Orbitron', 'Poppins', sans-serif; /* headings, numerals, brand */
  --font-body: 'Inter', 'Poppins', sans-serif;        /* body text, UI labels */
  --font-fa: 'Vazirmatn', 'Inter', sans-serif;         /* Persian-optimized fallback */

  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.92rem + 0.2vw, 1rem);
  --fs-lg: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.4rem, 1.3rem + 0.6vw, 1.75rem);
  --fs-2xl: clamp(1.9rem, 1.7rem + 1vw, 2.5rem);
  --fs-3xl: clamp(2.5rem, 2.1rem + 2vw, 3.5rem);

  /* ---- Spacing (4px scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Blur ---- */
  --blur-glass: 16px;
  --blur-backdrop: 40px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-card-hover: 10;
  --z-nav: 100;
  --z-modal: 1000;
  --z-toast: 1100;
}