/* ═══════════════════════════════════════════════════════════
   AVANTE — Design Tokens & CSS Custom Properties
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --color-bg:           #050505;
  --color-bg-elevated:  #0a0a0a;
  --color-surface:      #111111;
  --color-surface-2:    #1a1a1a;
  --color-border:       #1f1f1f;
  --color-border-hover: #2a2a2a;

  --color-blue:         #1E90FF;
  --color-blue-neon:    #3B82F6;
  --color-blue-light:   #60A5FA;
  --color-blue-dark:    #1565C0;
  --color-blue-glow:    rgba(30, 144, 255, 0.15);
  --color-blue-glow-md: rgba(30, 144, 255, 0.25);
  --color-blue-glow-lg: rgba(30, 144, 255, 0.4);

  --color-white:        #FFFFFF;
  --color-text:         #e4e4e7;
  --color-text-muted:   #a1a1aa;
  --color-text-dim:     #71717a;

  /* ── Typography ── */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Space Grotesk', 'Inter', sans-serif;
  --font-mono:      'JetBrains 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 */

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

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* ── 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;
  --space-40: 10rem;
  --space-section: clamp(5rem, 10vw, 8rem);

  /* ── Layout ── */
  --container-max:   1200px;
  --container-wide:  1400px;
  --container-pad:   clamp(1.5rem, 5vw, 4rem);
  --navbar-height:   72px;

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

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px var(--color-blue-glow),
                 0 0 40px var(--color-blue-glow);
  --shadow-glow-lg: 0 0 30px var(--color-blue-glow-md),
                    0 0 60px var(--color-blue-glow);

  /* ── Glassmorphism ── */
  --glass-bg:     rgba(17, 17, 17, 0.6);
  --glass-bg-2:   rgba(17, 17, 17, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur:   blur(20px);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── Z-Index ── */
  --z-particles:  1;
  --z-content:    10;
  --z-navbar:     100;
  --z-modal:      200;
  --z-loader:     300;
  --z-cursor:     400;
}