:root {
  /* === COLORS === */
  --color-bg:          #020608;
  --color-surface:     #080e12;
  --color-surface-2:   #0d1a22;
  --color-surface-3:   #112030;

  --color-border:      rgba(255, 255, 255, 0.07);
  --color-border-2:    rgba(255, 255, 255, 0.12);

  --color-accent:      #00c8ff;
  --color-accent-2:    #0057ff;
  --color-accent-3:    #7b2fff;
  --color-accent-warm: #ff6b35;

  --color-text:        #e8f0f4;
  --color-text-muted:  #6b8898;
  --color-text-faint:  #3d5a6a;

  --color-success:     #00e5a0;
  --color-warning:     #ffd166;

  /* === GRADIENTS === */
  --grad-primary:      linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  --grad-secondary:    linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
  --grad-warm:         linear-gradient(135deg, var(--color-accent-warm), var(--color-accent-3));
  --grad-text:         linear-gradient(135deg, #fff 0%, var(--color-accent) 100%);
  --grad-card:         linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

  /* === GLASS === */
  --glass-bg:          rgba(8, 20, 30, 0.65);
  --glass-bg-light:    rgba(255, 255, 255, 0.04);
  --glass-border:      rgba(0, 200, 255, 0.12);
  --glass-blur:        blur(20px);

  /* === SHADOWS === */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:         0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg:         0 20px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow:       0 0 40px rgba(0, 200, 255, 0.15);
  --shadow-glow-lg:    0 0 80px rgba(0, 87, 255, 0.2);
  --shadow-card:       0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--glass-border);

  /* === SPACING === */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* === BORDER RADIUS === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* === TYPOGRAPHY === */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;
  --text-6xl:  5rem;

  /* === TRANSITIONS === */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;

  /* === LAYOUT === */
  --container-max: 1200px;
  --nav-height:    72px;
  --section-pad:   var(--space-10);
}