/* ============================================================
   Jako (جاكو) — Design Tokens
   Source of truth: DESIGN.md — "Digital Synergy Architecture"
   Deep Space glassmorphism, Electric Cyan / Acid Green accents
   ============================================================ */

:root {
  /* ---- Surfaces & neutrals ---- */
  --surface: #0e014d;
  --surface-dim: #0e014d;
  --surface-bright: #363073;
  --surface-container-lowest: #0a0041;
  --surface-container-low: #170d54;
  --surface-container: #1b1358;
  --surface-container-high: #261f63;
  --surface-container-highest: #312b6e;
  --surface-variant: #312b6e;
  --surface-deep: #070029;
  --surface-glass: rgba(13, 0, 76, 0.6);

  --on-surface: #e4dfff;
  --on-surface-variant: #bcc8cf;
  --outline: #869398;
  --outline-variant: #3e484d;

  --background: #0e014d;
  --on-background: #e4dfff;

  /* ---- Primary — Electric Cyan ---- */
  --primary: #cbefff;
  --on-primary: #003544;
  --primary-container: #73daff;
  --on-primary-container: #005f76;
  --primary-fixed-dim: #6cd3f8;
  --surface-tint: #6cd3f8;
  --inverse-primary: #006780;

  /* ---- Secondary — Acid Green ---- */
  --secondary: #8fe22d;
  --on-secondary: #1d3700;
  --secondary-container: #75c500;
  --secondary-fixed-dim: #8adc26;

  /* ---- Tertiary — Warm Amber ---- */
  --tertiary: #ffe5cf;
  --tertiary-container: #ffc185;
  --tertiary-fixed-dim: #f8ba7f;
  --on-tertiary-container: #794d1c;

  /* ---- Error ---- */
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  /* ---- Live red (functional, for the LIVE badge only) ---- */
  --live: #ff3b5c;

  /* ---- Gold (premium gifts) ---- */
  --gold: #ffd700;

  /* ---- Glass effects ---- */
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: 12px;
  --cyan-glow: rgba(108, 211, 248, 0.15);

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Spacing (8px base) ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --margin-mobile: 20px;
  --safe-top: 80px;
  --safe-bottom: 80px;

  /* ---- Typography ---- */
  --font-display: 'Cairo', system-ui, sans-serif;
  --font-headline: 'Cairo', system-ui, sans-serif;
  --font-body: 'Tajawal', system-ui, sans-serif;
  --font-label: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* ---- Legibility gradient over video ---- */
  --video-scrim: linear-gradient(
    to top,
    rgba(7, 0, 41, 0.85) 0%,
    rgba(7, 0, 41, 0.45) 22%,
    rgba(7, 0, 41, 0) 45%
  );

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
}