/* ═══════════════════════════════════════════════════
   WhatIsVibeCode.com — Design Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --color-bg-deep:        #06060c;
  --color-bg-primary:     #0a0a14;
  --color-bg-elevated:    #12121f;
  --color-bg-card:        rgba(18, 18, 35, 0.65);
  --color-bg-glass:       rgba(18, 18, 35, 0.45);

  --color-text-primary:   #e8e6f0;
  --color-text-secondary: #9d9bb0;
  --color-text-muted:     #6b6880;
  --color-text-inverse:   #06060c;

  /* ── Aurora Palette ── */
  --color-accent-purple:  #a855f7;
  --color-accent-cyan:    #06b6d4;
  --color-accent-magenta: #ec4899;
  --color-accent-green:   #22d3ee;
  --color-accent-gold:    #f59e0b;

  /* ── Gradients ── */
  --gradient-aurora:      linear-gradient(135deg, #a855f7 0%, #06b6d4 50%, #ec4899 100%);
  --gradient-aurora-soft: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(6,182,212,0.15) 50%, rgba(236,72,153,0.15) 100%);
  --gradient-hero:        linear-gradient(180deg, #0a0a14 0%, #12121f 40%, #0a0a14 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(6,182,212,0.4), rgba(236,72,153,0.4));
  --gradient-text:        linear-gradient(90deg, #a855f7, #06b6d4, #ec4899, #a855f7);

  /* ── Typography ── */
  --font-primary:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm:    clamp(0.8125rem, 0.75rem + 0.3125vw, 0.9375rem);
  --text-base:  clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
  --text-lg:    clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl:   clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
  --text-4xl:   clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl:   clamp(2.75rem, 2rem + 3.75vw, 4.5rem);

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── 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;

  /* ── Layout ── */
  --max-width:     1200px;
  --max-width-sm:  680px;
  --max-width-lg:  1400px;
  --nav-height:    4rem;
  --section-pad-y: clamp(4rem, 3rem + 5vw, 8rem);

  /* ── Borders & Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  --border-subtle:  1px solid rgba(168, 85, 247, 0.12);
  --border-glass:   1px solid rgba(255, 255, 255, 0.06);
  --border-accent:  1px solid rgba(168, 85, 247, 0.3);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px rgba(168, 85, 247, 0.15);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ── Z-Index Scale ── */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1100;
}