/* ─── Design Tokens ─── */
:root {
  /* Brand colors */
  --clr-cyan:       #00f5ff;
  --clr-cyan-dim:   #00c8d4;
  --clr-cyan-glow:  rgba(0, 245, 255, 0.15);
  --clr-violet:     #a855f7;
  --clr-violet-dim: #7c3aed;
  --clr-violet-glow: rgba(168, 85, 247, 0.15);
  --clr-orange:     #ff6b35;
  --clr-orange-glow: rgba(255, 107, 53, 0.15);

  /* Surface palette */
  --bg-base:        #050710;
  --bg-surface-1:   #0a0d1a;
  --bg-surface-2:   #0f1320;
  --bg-surface-3:   #151a2e;
  --bg-card:        #0d1021;
  --bg-card-hover:  #121629;

  /* Border */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-muted:   rgba(255, 255, 255, 0.10);
  --border-cyan:    rgba(0, 245, 255, 0.30);
  --border-violet:  rgba(168, 85, 247, 0.30);

  /* Text */
  --txt-primary:    #f0f4ff;
  --txt-secondary:  #8b9cc8;
  --txt-muted:      #4a5578;
  --txt-inverse:    #050710;

  /* Status */
  --clr-success:    #22c55e;
  --clr-warning:    #f59e0b;
  --clr-danger:     #ef4444;
  --clr-info:       #3b82f6;

  /* Typography */
  --font-sans:      'Inter', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.4);
  --shadow-cyan:  0 0 24px rgba(0, 245, 255, 0.20), 0 0 60px rgba(0, 245, 255, 0.08);
  --shadow-violet:0 0 24px rgba(168, 85, 247, 0.20), 0 0 60px rgba(168, 85, 247, 0.08);
  --shadow-orange:0 0 24px rgba(255, 107, 53, 0.20);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index ladder */
  --z-navbar:  100;
  --z-overlay: 200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;

  /* Layout */
  --navbar-h:     72px;
  --container-w:  1280px;
  --sidebar-w:    260px;
  --cart-w:       420px;
}