@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;800&display=swap');

:root {
  --color-bg: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-tint: #E3F0E8;
  --color-primary: #4CAE7D;
  --color-primary-dark: #3F9A6B;
  --color-on-primary: #12251B;
  --color-text: #1B2A22;
  --color-muted: #5A6760;
  --color-border: #DADFDB;
  --color-accent: #8F5B5B;
  --color-on-accent: #FFFFFF;

  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-body: 1.125rem;
  --text-small: 0.8125rem;
  --text-lead: 1.25rem;
  --text-h1-hero: 2.375rem;
  --text-h1: 2.125rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-section: 3.5rem;

  --radius-card: 20px;
  --radius-frame: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px rgba(27, 42, 34, 0.06);
  --content-width: 1180px;
  --reading-width: 640px;
  --header-height: 72px;
}

@media (min-width: 900px) {
  :root {
    --text-h1-hero: 4rem;
    --text-h1: 3rem;
    --text-h2: 2.125rem;
    --space-section: 6rem;
  }
}