/* ═══════════════════════════════════════════════════
   CSS VARIABLES — Design Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Brand Colors ─── */
  --mint-50:  #ECFDF5;
  --mint-100: #D1FAE5;
  --mint-200: #A7F3D0;
  --mint-300: #80D1BA;
  --mint-400: #5EBBAB;
  --mint-500: #3D9B8F;
  --mint-600: #2D7A71;
  --mint-700: #1F5F58;

  --teal-300: #80D1BA;
  --teal-400: #5EEAD4;
  --teal-500: #14B8A6;

  --purple-400: #C084FC;
  --purple-500: #A855F7;
  --purple-600: #9333EA;

  --indigo-400: #818CF8;
  --indigo-500: #6366F1;

  --pink-400: #F472B6;
  --pink-500: #EC4899;

  --green-400: #4ADE80;
  --green-500: #22C55E;

  --red-400: #F87171;
  --red-500: #EF4444;

  --yellow-400: #FBBF24;
  --yellow-500: #EAB308;

  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;

  --blue-400: #60A5FA;
  --blue-500: #3B82F6;

  --orange-400: #FF9E66;
  --orange-500: #FF6B35;

  /* ─── Dark Theme (default) ─── */
  --bg-primary:     #0a0a0f;
  --bg-secondary:   #111118;
  --bg-tertiary:    #18181f;
  --bg-card:        rgba(255, 255, 255, 0.03);
  --bg-card-hover:  rgba(255, 255, 255, 0.06);
  --bg-glass:       rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);

  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary:  #64748B;
  --text-muted:     #475569;

  --border-primary:   rgba(255, 255, 255, 0.06);
  --border-secondary: rgba(255, 255, 255, 0.03);
  --border-accent:    rgba(128, 209, 186, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 60px rgba(128, 209, 186, 0.15);

  /* ─── Gradient ─── */
  --gradient-brand: linear-gradient(135deg, var(--mint-300), var(--mint-500));
  --gradient-brand-wide: linear-gradient(90deg, var(--mint-300), var(--mint-500), var(--teal-400));
  --gradient-text: linear-gradient(135deg, var(--mint-300) 0%, var(--teal-400) 50%, var(--mint-500) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(128,209,186,0.15) 0%, transparent 70%);

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

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.05em;

  /* ─── 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 ─── */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ─── Border Radius ─── */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* ─── Z-index ─── */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-loader: 1000;
}