:root {
  /* Colors */
  --color-bg:           #FFFFFF;
  --color-secondary:    #784C2E;
  --color-accent:       #1D7330;
  --color-accent-hover: #185C27;
  --color-text:         #111111;
  --color-text-light:   #FFFFFF;
  --color-muted:        #666666;
  --color-border:       #E5E5E5;
  --color-surface:      #F7F5F3;

  /* Typography */
  --font-display:   'Fraunces', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-size-base: 16px;

  /* Type scale */
  --text-xs:   0.75rem;   /* 12px — labels, captions */
  --text-sm:   0.875rem;  /* 14px — small body */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:   1.125rem;  /* 18px — lead text */
  --text-xl:   1.5rem;    /* 24px — section headings */
  --text-2xl:  2.5rem;    /* 40px — hero / display */
  --text-3xl:  3.5rem;    /* 56px — hero desktop */

  /* Heading style */
  --heading-letter-spacing: -0.02em;
  --heading-line-height:    1.1;

  /* Spacing — 4-point grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Transitions */
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);

  /* Layout */
  --max-width: 1440px;
  --content-width: 1200px;
  --grid-gap: 2px;
  --header-height: 72px;
}