:root {
  /* Colors — from Figma */
  --color-bg:           #0a0a0a;
  --color-text-primary: #f8f8f6;
  --color-text-secondary: #e2e2dc;
  --color-text-muted:   #6b6b6b;
  --color-border:       #6b6b6b;
  --color-border-nav:   #848484;
  --color-card-bg:      #474747;
  --color-card-hover:   #B3C281;

  /* Typography */
  --font-display: 'Instrument Serif', serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  11px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  59px;
  --space-2xl: 180px;
  --space-3xl: 200px;

  /* Layout */
  --nav-height:    67px;
  --content-width: 1152px;
  --page-padding:  clamp(24px, 4vw, 48px);

  /* Cards */
  --radius-card:      0px;
  --shadow-card:      none;
  --shadow-card-hover: 0 24px 48px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
}