@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display-hero: 800 clamp(44px, 5vw, 52px)/1.15 var(--font-family);
  --font-headline-lg: 700 28px/34px var(--font-family);
  --font-headline-md: 700 22px/28px var(--font-family);
  --font-headline-sm: 600 18px/24px var(--font-family);
  --font-body-md: 400 16px/24px var(--font-family);
  --font-body-sm: 400 14px/20px var(--font-family);
  --font-label-lg: 600 14px/20px var(--font-family);
  --font-label-caps: 700 12px/16px var(--font-family);
  --font-caption: 500 12px/16px var(--font-family);
  
  --color-primary: #1F6B52;
  --color-primary-dark: #164A3B;
  --color-mint: #DDF3E9;
  --color-teal: #36B8B0;
  --color-coral: #FF8A5B;
  --color-amber: #F5B547;
  --color-canvas: #FAF7F0;
  --color-surface: #FFFFFF;
  --color-text: #17211B;
  --color-text-secondary: #68756D;
  --color-border: #E6E7E2;
  --color-overlay: rgba(0,0,0,.60);
  --color-success: #21875E;
  --color-info: #2672C9;
  --color-warning: #B77916;
  --color-error: #C83F49;

  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  --shadow-xs: 0 2px 8px rgba(22,74,59,.06);
  --shadow-sm: 0 6px 20px rgba(22,74,59,.09);
  --shadow-md: 0 18px 44px rgba(22,74,59,.13);
  --shadow-lg: 0 28px 80px rgba(22,74,59,.18);

  --container: 1240px;
  --container-wide: 1440px;
}