:root {
  /* Colors */
  --color-bg:           #0A0A0B;
  --color-bg-elevated:  #111113;
  --color-bg-subtle:    #0F0F11;
  --color-accent:       #2E5BFF;
  --color-accent-hover: #2451E6;
  --color-accent-muted: rgba(46, 91, 255, 0.08);
  --color-accent-border:rgba(46, 91, 255, 0.3);
  --color-text-primary: #E0E0E0;
  --color-text-muted:   #8E9196;
  --color-text-faint:   #4A4A52;
  --color-border:       #2A2A2D;
  --color-border-subtle:#1F1F1F;
  --color-success:      #10B981;
  --color-danger:       #EF4444;
  --color-info:         #3B82F6;

  /* Typography */
  --font-serif:   'Source Serif 4', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   56px;
  --text-5xl:   72px;

  /* Spacing (4px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 100px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* Layout */
  --max-width:        960px;
  --max-width-narrow: 640px;
  --section-padding:  120px;
}