:root {
  /* === COLORS === */
  --color-primary: #1a8917;     /* Green (Primary) */
  --color-text:    #000000;     /* Black (Text) */
  --color-bg:      #ffffff;     /* White (Background) */
  --color-surface: #f2f2f2;     /* Gray 100 (Surface) */
  --color-muted:   #757575;     /* Gray 500 (Muted text) */
  --color-hover:   #e6f4ea;     /* Green 50 (Hover tint) */
  --color-accent:  #FFC017;     /* Amber (Highlight) */

  /* === FONTS === */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Source Serif 4', serif;
  --font-ui:      'Inter', sans-serif;

  /* === FONT SIZES === */
  --fs-display:  30px;
  --fs-h1:       24px;
  --fs-h2:       20px;
  --fs-subtitle: 16px;
  --fs-body:     16px;
  --fs-caption:  12px;
  --fs-meta:     11px;

  /* === FONT WEIGHTS === */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* === SPACING === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 80px;

  /* === RADII === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* === LAYOUT === */
  --max-width-content: 728px;
  --max-width-page:    1192px;
}