/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* Colors */
  --c-bg:          #0b0b12;
  --c-bg-2:        #0f0f1a;
  --c-bg-3:        #13131f;
  --c-surface:     #16162a;
  --c-surface-2:   #1c1c32;
  --c-border:      rgba(120, 90, 255, 0.12);
  --c-border-2:    rgba(120, 90, 255, 0.22);

  /* Brand */
  --c-purple:      #7c3aed;
  --c-purple-light:#a78bfa;
  --c-purple-glow: rgba(124, 58, 237, 0.35);
  --c-blue:        #3b82f6;
  --c-blue-light:  #93c5fd;
  --c-cyan:        #06b6d4;
  --c-cyan-light:  #67e8f9;

  /* Gradients */
  --g-brand:  linear-gradient(135deg, var(--c-purple) 0%, var(--c-cyan) 100%);
  --g-card:   linear-gradient(145deg, rgba(124,58,237,0.08) 0%, rgba(6,182,212,0.04) 100%);
  --g-hero:   radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,58,237,0.25) 0%, transparent 70%);

  /* Text */
  --c-text:        #e8e8f0;
  --c-text-2:      #9898b8;
  --c-text-3:      #6060a0;
  --c-text-inv:    #0b0b12;

  /* Spacing */
  --sp-1: 0.25rem;   /* 4px  */
  --sp-2: 0.5rem;    /* 8px  */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */

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

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card:  0 0 40px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 80px rgba(124, 58, 237, 0.18);
  --shadow-btn:   0 4px 24px rgba(124, 58, 237, 0.45);

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-base:   0.25s ease;
  --t-slow:   0.4s ease;
  --t-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Light Theme ────────────────────────────────────────── */
[data-theme="light"] {
  --c-bg:          #f4f4fa;
  --c-bg-2:        #ebebf5;
  --c-bg-3:        #e2e2f0;
  --c-surface:     #ffffff;
  --c-surface-2:   #f0f0fa;
  --c-border:      rgba(100, 70, 200, 0.12);
  --c-border-2:    rgba(100, 70, 200, 0.22);

  --c-purple:      #6d28d9;
  --c-purple-light:#7c3aed;
  --c-purple-glow: rgba(109, 40, 217, 0.2);
  --c-blue:        #2563eb;
  --c-blue-light:  #3b82f6;
  --c-cyan:        #0891b2;
  --c-cyan-light:  #06b6d4;

  --g-brand:  linear-gradient(135deg, #6d28d9 0%, #0891b2 100%);
  --g-card:   linear-gradient(145deg, rgba(109,40,217,0.05) 0%, rgba(8,145,178,0.03) 100%);
  --g-hero:   radial-gradient(ellipse 80% 60% at 50% -10%, rgba(109,40,217,0.12) 0%, transparent 70%);

  --c-text:        #1a1a2e;
  --c-text-2:      #4a4a7a;
  --c-text-3:      #7070a0;
  --c-text-inv:    #ffffff;

  --shadow-card:  0 0 40px rgba(109, 40, 217, 0.06), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-glow:  0 0 60px rgba(109, 40, 217, 0.1);
  --shadow-btn:   0 4px 20px rgba(109, 40, 217, 0.35);
}

[data-theme="light"] body { background: var(--c-bg); }
[data-theme="light"] #bg-canvas { opacity: 0.2; }
[data-theme="light"] body::after { opacity: 0.01; }

[data-theme="light"] .terminal-demo,
[data-theme="light"] .code-window {
  background: #1a1a2e;
  border-color: rgba(109, 40, 217, 0.25);
}
[data-theme="light"] .terminal-demo__bar,
[data-theme="light"] .code-window__bar {
  background: rgba(0,0,0,0.1);
}
[data-theme="light"] .code-window__body {
  background: #12121e;
}