/* Design tokens. Change colours, type and spacing here; components only use these variables. */
:root {
  /* Colour */
  --color-primary: #1E5B3F;
  --color-primary-tint: #E8F1EA;
  --color-primary-hill-back: #2E7352;
  --color-primary-hill-front: #3D8A63;
  --color-accent: #F2B33D;
  --color-accent-hover: #E5A42B;
  --color-ink: #16251C;
  --color-ink-muted: #3D4C43;
  --color-ink-subtle: #4A5A50;
  --color-bg: #F4F6F1;
  --color-surface: #FFFFFF;
  --color-border: #E2E7DE;
  --color-border-strong: #CBD4C6;
  --color-switch-off: #B8C2B4;
  --color-star: #B7791F;
  --color-offer-bg: #FFF1D6;
  --color-offer-ink: #6B4A0E;
  --color-tag-bg: #E6EBE3;
  --color-placeholder: #DCE3D7;
  --color-placeholder-alt: #E3E8DF;
  --color-map-sea: #CFE3EA;
  --color-map-land: #E7EEDC;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #D5DED8;
  --color-hero-lede: #E4F0E8;
  --color-hero-eyebrow: #CFE6D7;
  --color-focus: #24476B;
  --color-error: #A12C2C;

  /* Type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.0625rem; /* 17 */
  --text-h3: 1.0625rem;
  --text-h2: clamp(1.375rem, 1.05rem + 1.4vw, 2.25rem);
  --text-h1: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --text-hero: clamp(2.375rem, 1.5rem + 3.6vw, 4.25rem);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 72px;

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(22 37 28 / 0.06);
  --shadow-raised: 0 12px 32px rgb(22 37 28 / 0.14);
  --shadow-float: 0 8px 20px rgb(22 37 28 / 0.25);

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --control-height: 52px;
  --header-height: 64px;
  --section-gap: var(--space-8);
}

/* Breakpoints: 768px (tablet), 1024px (desktop). Custom properties can't be used in
   media queries, so the numbers are repeated in each stylesheet. */
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --control-height: 56px;
    --header-height: 72px;
    --section-gap: 56px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --header-height: 80px;
    --section-gap: var(--space-9);
  }
}