/* ═══════════════════════════════════════════════════════════════════════
   StoreIPTV8K v2.0 — Design Tokens
   Hybrid Premium: Royal Cinema × Tech Cinematic
   Colors: Black + Gold + Copper + Glass
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BLACK FOUNDATION (70% of UI) ─────────────────────────────── */
  --ink-deep:        #050505;   /* Deepest — hero backgrounds */
  --ink:             #0a0a0a;   /* Body background */
  --surface-1:       #111111;   /* Standard cards */
  --surface-2:       #181818;   /* Elevated cards (hover) */
  --surface-3:       #1f1f1f;   /* Top-level surfaces */

  /* ─── GOLD ACCENT (20%) ────────────────────────────────────────── */
  --gold:            #ff2ec6;   /* Primary gold (main CTAs, brand) */
  --gold-light:      #7dd3fc;   /* Bright highlights, important text */
  --gold-mid:        #c026d3;   /* Hover state */
  --gold-deep:       #7c1d6e;   /* Active / pressed */
  --gold-bronze:     #581c5c;   /* Deep shadow */
  --gold-soft:       rgba(255, 46, 198, 0.08);  /* Subtle wash */
  --gold-glow:       rgba(255, 46, 198, 0.35);  /* Glow effects */

  /* ─── COPPER WARMTH (5%) ───────────────────────────────────────── */
  --copper:          #00c2d1;
  --copper-bright:   #22d3ee;
  --copper-soft:     rgba(34, 211, 238, 0.08);

  /* ─── GLASS LAYER (5%) ─────────────────────────────────────────── */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.06);
  --glass-border:    rgba(255, 46, 198, 0.18);
  --glass-blur:      blur(20px) saturate(180%);

  /* ─── BORDERS & LINES ──────────────────────────────────────────── */
  --line:            rgba(255, 46, 198, 0.12);
  --line-strong:     rgba(255, 46, 198, 0.25);
  --line-dim:        rgba(255, 255, 255, 0.06);

  /* ─── TEXT COLORS ──────────────────────────────────────────────── */
  --text:            #f5f5f5;
  --text-soft:       #d1d5db;
  --text-muted:      #9ca3af;
  --text-dim:        #6b7280;
  --text-inverse:    #0a0a0a;
  --text-on-gold:    #0a0a0a;
  --text-on-dark:    #f5f5f5;

  /* ─── SEMANTIC ─────────────────────────────────────────────────── */
  --success:         #10b981;
  --success-soft:    rgba(16, 185, 129, 0.10);
  --danger:          #ef4444;
  --danger-soft:     rgba(239, 68, 68, 0.10);
  --warning:         #f59e0b;
  --warning-soft:    rgba(245, 158, 11, 0.10);

  /* ─── AMBER (urgency — distinct hue from gold; alias of copper-bright) ─── */
  --amber:           var(--copper-bright);
  --amber-soft:      rgba(34, 211, 238, 0.10);
  --amber-strong:    rgba(34, 211, 238, 0.30);

  --info:            #60a5fa;
  --info-soft:       rgba(96, 165, 250, 0.10);

  /* ─── SPACING SCALE (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;
  --space-10:  128px;

  /* ─── RADII ────────────────────────────────────────────────────── */
  --r-xs:      4px;
  --r-sm:      6px;
  --r-md:      10px;
  --r-lg:      14px;
  --r-xl:      20px;
  --r-2xl:     28px;
  --r-pill:    999px;

  /* ─── SHADOWS ──────────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 12px 36px rgba(0, 0, 0, 0.6);
  --shadow-xl:     0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-drop:   0 30px 80px rgba(0, 0, 0, 0.8);

  /* ─── GLOWS (the cinematic touch) ──────────────────────────────── */
  --glow-soft:     0 0 30px rgba(255, 46, 198, 0.20);
  --glow:          0 0 40px rgba(255, 46, 198, 0.35);
  --glow-strong:   0 0 60px rgba(255, 46, 198, 0.50);
  --glow-copper:   0 0 40px rgba(34, 211, 238, 0.30);
  --glow-success:  0 0 30px rgba(16, 185, 129, 0.30);
  --glow-danger:   0 0 30px rgba(239, 68, 68, 0.30);

  /* ─── GRADIENTS ────────────────────────────────────────────────── */
  --grad-gold:         linear-gradient(135deg, #7c1d6e 0%, #ff2ec6 50%, #7dd3fc 100%);
  --grad-gold-copper:  linear-gradient(135deg, #00c2d1 0%, #ff2ec6 60%, #7dd3fc 100%);
  --grad-gold-soft:    linear-gradient(160deg, rgba(255,46,198,0.10) 0%, transparent 60%);
  --grad-gold-line:    linear-gradient(90deg, transparent 0%, #ff2ec6 50%, transparent 100%);
  --grad-card:         linear-gradient(160deg, rgba(255,46,198,0.04) 0%, transparent 50%), #111111;
  --grad-card-hover:   linear-gradient(160deg, rgba(255,46,198,0.08) 0%, transparent 50%), #181818;
  --grad-hero:         radial-gradient(ellipse at top, rgba(255,46,198,0.15) 0%, transparent 60%),
                       radial-gradient(ellipse at bottom right, rgba(34,211,238,0.10) 0%, transparent 50%),
                       #050505;
  --grad-overlay:      linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.7) 70%, rgba(5,5,5,0.95) 100%);

  /* ─── TYPOGRAPHY ───────────────────────────────────────────────── */
  --font-display:    'Chakra Petch', 'Cairo', system-ui, sans-serif;
  --font-body:       'Inter', 'Cairo', system-ui, -apple-system, sans-serif;
  --font-arabic:     'Cairo', 'Inter', system-ui, sans-serif;
  --font-en:         'Inter', 'Cairo', system-ui, sans-serif;
  --font-ar:         'Cairo', 'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Consolas', 'Courier New', monospace;

  /* Type scale (mobile-first) */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   64px;
  --text-6xl:   80px;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ─── TRANSITIONS ──────────────────────────────────────────────── */
  --tr-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr:         250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-bounce:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── LAYOUT ───────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;

  --header-h:      72px;
  --header-h-mob:  64px;
  --sidebar-w:     280px;

  /* ─── Z-INDEX ──────────────────────────────────────────────────── */
  --z-base:        1;
  --z-dropdown:    50;
  --z-sticky:      100;
  --z-overlay:     900;
  --z-modal:       1000;
  --z-toast:       1100;
  --z-cursor:      9999;

  /* ─── Touch targets (mobile) ───────────────────────────────────── */
  --touch:         44px;
}

/* ─── Larger screens: scale up the type scale ──────────────────── */
@media (min-width: 768px) {
  :root {
    --text-base:  16px;
    --text-md:    17px;
    --text-lg:    20px;
    --text-xl:    24px;
    --text-2xl:   32px;
    --text-3xl:   42px;
    --text-4xl:   56px;
    --text-5xl:   72px;
    --text-6xl:   96px;
  }
}

@media (min-width: 1280px) {
  :root {
    --text-4xl:   64px;
    --text-5xl:   80px;
    --text-6xl:   112px;
  }
}

/* ─── Reduced motion preference ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-fast:   0ms;
    --tr:        0ms;
    --tr-slow:   0ms;
    --tr-bounce: 0ms;
  }
}