@import url("../brand/WarmMile_colors.css");

:root {
  --warmmile-color-accent: var(--warmmile-clay);
  --warmmile-color-primary-text: var(--warmmile-forest);
  --warmmile-color-dark-background: var(--warmmile-forest);
  --warmmile-color-warm-background: var(--warmmile-oat);
  --warmmile-color-clean-background: var(--warmmile-white);
  --warmmile-color-utility: var(--warmmile-black);
  --warmmile-color-border: rgba(36, 61, 53, 0.18);
  --warmmile-color-muted-text: rgba(36, 61, 53, 0.74);

  --warmmile-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --warmmile-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --warmmile-space-1: 8px;
  --warmmile-space-2: 16px;
  --warmmile-space-3: 24px;
  --warmmile-space-4: 32px;
  --warmmile-space-5: 48px;
  --warmmile-space-6: 64px;
  --warmmile-space-7: 80px;
  --warmmile-space-8: 96px;

  --warmmile-container-main: 1240px;
  --warmmile-container-reading: 760px;
  --warmmile-radius-button: 8px;
  --warmmile-radius-card: 10px;
  --warmmile-radius-large: 24px;
  --warmmile-section-space: clamp(72px, 6vw, 96px);
  --warmmile-header-height: 88px;
  --warmmile-anchor-offset: calc(var(--warmmile-header-height) + var(--warmmile-space-4));

  --warmmile-breakpoint-mobile-max: 767px;
  --warmmile-breakpoint-tablet-min: 768px;
  --warmmile-breakpoint-tablet-max: 1099px;
  --warmmile-breakpoint-desktop-min: 1100px;
}