:root {
  /* Colors — exact from Figma SVG export */
  --color-bg:        #F2F0E8;
  --color-bg-dark:   #1A1A1A;
  --color-text:      #1C1410;
  --color-text-inv:  #F2F0E8;
  --color-accent:    #CF0800;
  --color-muted:     #363330;

  /* Typography */
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl:  128px;

  /* Layout */
  --max-width:    1200px;
  --gutter:       48px;
  --gutter-sm:    24px;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Transitions */
  --transition: 0.25s ease;
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --space-3xl: 64px;
    --space-4xl: 80px;
  }
}