:root {
  /* Colors */
  --color-bg:           #0A0A0A;
  --color-bg-surface:   #141414;
  --color-bg-elevated:  #1C1C1C;
  --color-text:         #FFFFFF;
  --color-text-muted:   rgba(255, 255, 255, 0.55);
  --color-text-faint:   rgba(255, 255, 255, 0.25);
  --color-accent:       #4A9EFF;
  --color-border:       rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(255, 255, 255, 0.25);

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body:    'IBM Plex Mono', monospace;

  /* Spacing */
  --space-section:    140px;
  --space-section-sm: 80px;
  --container-max:    1200px;
  --container-pad:    24px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;

  /* Nav */
  --nav-height: 64px;
}

@media (max-width: 768px) {
  :root {
    --space-section:    80px;
    --space-section-sm: 48px;
    --container-pad:    20px;
  }
}