:root {
  /* Colors */
  --black:      #0A0A0A;
  --surface:    #111111;
  --elevated:   #1A1A1A;
  --border:     #242424;
  --border-bright: #333333;

  --blue:       #3B82F6;
  --blue-bright: #60A5FA;
  --blue-dim:   #1D4ED8;
  --blue-glow:  rgba(59, 130, 246, 0.15);
  --blue-glow-strong: rgba(59, 130, 246, 0.35);

  --white:      #FFFFFF;
  --gray-100:   #F3F4F6;
  --gray-400:   #9CA3AF;
  --gray-600:   #4B5563;

  --error:      #EF4444;
  --success:    #10B981;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --section-pad: clamp(80px, 12vw, 140px);
  --container:   1280px;
  --gutter:      clamp(20px, 5vw, 60px);

  /* Borders */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  /* Shadows */
  --shadow-blue: 0 0 40px rgba(59, 130, 246, 0.2);
  --shadow-deep: 0 32px 64px rgba(0, 0, 0, 0.6);

  /* 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.87, 0, 0.13, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-xslow:  1000ms;
}