:root {
  --green-dark: #2D5A3D;
  --green-mid: #3D7A53;
  --green-light: #6BA583;
  --green-pale: #C8DDD0;
  --off-white: #F5F4F2;
  --warm-white: #FAFAF8;
  --charcoal: #1A1A18;
  --slate: #4A4A46;
  --muted: #8A8A84;
  --border: #E2E0DC;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'DM Mono', 'IBM Plex Mono', monospace;

  --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;
}

html { font-size: 16px; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  background: var(--off-white);
  color: var(--charcoal);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}

h1 { font-size: 36px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.3; }

.meta-label,
.uppercase-mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

a { color: var(--green-dark); }
a:hover { color: var(--green-mid); }

::selection { background: var(--green-pale); color: var(--charcoal); }