:root {
  /* Colors — extracted from Figma node 33:2 and 286:22 */
  --color-primary: #43c43c;
  --color-primary-dark: #36a330;
  --color-dark: #0d2818;
  --color-dark-card: #243b2d;
  --color-bg: #f7f5f2;
  --color-heading: #111827;
  --color-text: #6f6f6f;
  --color-text-on-dark: #aaaaaa;
  --color-text-on-image: #a8a8a8;
  --color-card-title: #3a3a3a;
  --color-input-placeholder: #607869;
  --color-border: #ececec;
  --color-white: #ffffff;

  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --fs-hero-h1: 50px;
  --fs-h2: 36px;
  --fs-card-title: 20px;
  --fs-tag: 18px;
  --fs-body: 16px;

  /* Radii */
  --radius-card: 16px;
  --radius-btn: 16px;
  --radius-pill-btn: 12px;
  --radius-icon: 8px;
  --radius-pill-full: 1200px;

  /* Layout */
  /* 1458 = 1410 (Figma's 1920px-viewport content width) + 2x24 padding-inline,
     so .container's content box is exactly 1410px wide at desktop sizes —
     matches every card-row width (3x450 + 2x30 = 1410) baked into Figma. */
  --container-max: 1458px;
  --container-pad: 24px;
  --gap-section: 30px;
}