/* ==========================================================================
   VARIABLES — Design Tokens
   All colors, spacing, typography, and visual tokens live here.
   ========================================================================== */

:root {
  /* ---- Palette ---- */
  --color-bg:           #0E0E11;
  --color-bg-alt:       #121216;
  --color-surface:      #1A1A20;
  --color-surface-alt:  #202027;
  --color-line:         rgba(255, 255, 255, 0.08);
  --color-line-strong:  rgba(255, 255, 255, 0.14);
  --color-text:         #F4F4F6;
  --color-muted:        #9DA1AC;
  --color-violet:       #7B4FE0;
  --color-blue:         #3FA9E8;
  --color-white:        #FFFFFF;
  --color-black:        #000000;

  /* ---- Gradients ---- */
  --gradient-brand:     linear-gradient(120deg, #7B4FE0 0%, #3FA9E8 100%);
  --gradient-brand-180: linear-gradient(180deg, #7B4FE0, #3FA9E8);
  --gradient-surface:   linear-gradient(160deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);

  /* ---- Shadows ---- */
  --shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-xl:   0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 10px 30px rgba(123, 79, 224, 0.4);

  /* ---- Border Radius ---- */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 22px;
  --radius-3xl: 26px;

  /* ---- Typography ---- */
  --font-heading: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ---- Spacing ---- */
  --space-xs:  8px;
  --space-sm:  14px;
  --space-md:  20px;
  --space-lg:  28px;
  --space-xl:  44px;
  --space-2xl: 56px;
  --space-3xl: 80px;
  --space-4xl: 100px;

  /* ---- Layout ---- */
  --max-width: 1120px;
  --gutter:    24px;
  --nav-height: 68px;

  /* ---- Transitions ---- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;
  --transition-reveal: 0.7s ease;

  /* ---- Motion Design Tokens ---- */
  --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-quart:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-elastic:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);

  --duration-instant:   100ms;
  --duration-fast:      200ms;
  --duration-base:      350ms;
  --duration-slow:      600ms;
  --duration-reveal:    800ms;
  --duration-dramatic:  1200ms;

  --stagger-fast:       60ms;
  --stagger-base:       100ms;
  --stagger-slow:       150ms;

  /* ---- Z-index ---- */
  --z-nav:     50;
  --z-overlay: 40;
  --z-modal:   60;
  --z-top:     100;
}