/* ============================================
   DESIGN TOKENS — Mega Bundle
   ============================================ */
:root {
  /* Color: Brand */
  --color-primary-50:  #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;

  /* Color: Accent */
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;

  /* Color: Neutral */
  --color-bg:        #0b1020;
  --color-surface:   #131a2e;
  --color-surface-2: #1c2542;
  --color-border:    #2a3556;
  --color-text:      #e6eaf2;
  --color-text-muted:#9aa3b8;

  /* Color: Semantic */
  --color-success: #22c55e;
  --color-danger:  #ef4444;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-base:1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.75rem;

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

  --lh-tight: 1.15;
  --lh-base:  1.6;

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(99,102,241,.4),
                 0 12px 40px rgba(99,102,241,.35);

  /* Layout */
  --container-max: 1200px;
  --transition: 200ms cubic-bezier(.4,0,.2,1);
}