:root {
  --color-primary: #1c2522;
  --color-text: #1c2522;
  --color-text-strong: #101816;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f4ef;
  --color-surface-dark: #182321;
  --color-border: rgba(28, 37, 34, 0.12);
  --color-border-strong: rgba(28, 37, 34, 0.2);
  --color-muted: #999999;
  --color-meta: #707a88;
  --color-accent: #e38836;
  --color-accent-deep: #203656;
  --color-footer-text: rgba(255, 255, 255, 0.72);
  --color-footer-border: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 22px 48px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 12px 28px rgba(14, 20, 18, 0.06);

  --font-heading: "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-ui: "Poppins", Arial, sans-serif;

  --font-size-meta: 0.75rem;
  --font-size-helper: 0.8125rem;
  --font-size-ui: 0.875rem;
  --font-size-body: 1rem;
  --font-size-card-title: 1.125rem;
  --font-size-section-title: 1.125rem;
  --font-size-feature-title: 1.5rem;
  --font-size-display: 2rem;

  --line-height-tight: 1.15;
  --line-height-heading: 1.24;
  --line-height-body: 1.75;
  --line-height-meta: 1.5;

  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-5: 0.3125rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-15: 0.9375rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-25: 1.5625rem;
  --space-30: 1.875rem;
  --space-40: 2.5rem;
  --space-50: 3.125rem;
  --space-60: 3.75rem;
  --space-80: 5rem;
  --space-100: 6.25rem;

  --space-section: var(--space-50);
  --space-section-lg: var(--space-80);
  --space-section-tight: var(--space-40);

  --container-wide: 77.5rem;
  --container-content: 70rem;
  --container-reading: 44rem;
  --container-feature: 64rem;

  --font-size-body-lg: 1.125rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;

  --bp-phone: 24.6875rem;
  --bp-tablet: 50.625rem;
  --bp-desktop: 75rem;
}

@media (min-width: 50.625rem) {
  :root {
    --font-size-feature-title: 2rem;
    --font-size-display: 3rem;
    --font-size-body-lg: 1.1875rem;
    --space-section: var(--space-80);
    --space-section-tight: var(--space-50);
  }
}

@media (min-width: 75rem) {
  :root {
    --font-size-feature-title: 2.375rem;
    --font-size-display: 4rem;
    --font-size-body-lg: 1.25rem;
    --space-section: var(--space-100);
    --space-section-tight: var(--space-60);
  }
}