/* =============================================================
   Balxawmi — Design tokens
   ============================================================= */
:root {
  /* Palette */
  --bg:           #0A0F1C;
  --bg-alt:       #111827;
  --surface:      #1A2332;
  --surface-2:    #222D42;
  --border:       #2D3748;
  --text:         #F5F7FA;
  --text-muted:   #9CA3AF;
  --text-dim:     #6B7280;
  --cyan:         #00E5FF;
  --violet:       #A855F7;
  --green:        #10F5A5;
  --red:          #FF3D71;
  --yellow:       #FFD166;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #00E5FF 0%, #A855F7 100%);
  --grad-soft:    linear-gradient(135deg, rgba(0,229,255,.15) 0%, rgba(168,85,247,.15) 100%);
  --grad-hero:    radial-gradient(ellipse at top, rgba(168,85,247,.35), transparent 50%),
                  radial-gradient(ellipse at bottom right, rgba(0,229,255,.25), transparent 50%),
                  #0A0F1C;

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Sizing */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Shadows & glows */
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.5);
  --glow-cyan: 0 0 24px rgba(0,229,255,.4);
  --glow-violet: 0 0 24px rgba(168,85,247,.4);

  /* Layout */
  --container: 1200px;
  --container-narrow: 900px;
  --nav-height: 84px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 180ms;
  --dur-med: 280ms;
  --dur-slow: 600ms;
}