:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 72px;
  --space-13: 80px;
  --space-14: 96px;

  /* Brand greens */
  --gw-green: #213021;
  --green-mid: #2d4230;   /* hover states, subtle accents */
  --green-soft: #344b38;  /* softer elevated green surfaces */

  /* Accent */
  --yellow: #ffd100;
  --yellow-soft: #f2bf2f; /* warmer, more premium yellow — gradients and icon fills */

  /* Neutrals */
  --gray: #59606d;
  --beige: #e5d6c2;        /* warm surfaces, image frames */
  --off-white: #fbfbfb;
  --surface-light: #f7f8f6; /* elevated light surface — above off-white */
  --text: #2e3031;

  /* Layout */
  --max-w: 1280px;
  --space-container-x: var(--space-9);
  --space-container-x-tablet: 30px;
  --space-container-x-mobile: var(--space-6);
  --space-section-featured-y: var(--space-14);
  --space-section-support-y: var(--space-12);
  --space-section-form-y: var(--space-13);
  --space-section-page-y: var(--space-13);
  --space-section-mobile-y: var(--space-11);
  --space-hero-inner-bottom: var(--space-7);

  /* Typography */
  --font-body: 'Readex Pro', sans-serif;
  --font-head: 'Unbounded', sans-serif;
}

@media (max-width: 768px) {
  :root {
    --space-section-featured-y: var(--space-section-mobile-y);
    --space-section-support-y: var(--space-section-mobile-y);
    --space-section-form-y: var(--space-section-mobile-y);
    --space-section-page-y: var(--space-section-mobile-y);
  }
}

@media (min-width: 1800px) {
  :root {
    --max-w: 1408px;
  }
}
