/* Countkind design tokens, website subset (WEBSITE_STYLE_v1 sections 1 to 3).
   Source: Countkind design system, approved 22 Oct 2026. Light theme only.
   Every colour used on the site is defined here; site.css uses only these variables.
   Contrast of every text pair is checked by tests/style.mjs. */

/* Fraunces, trimmed to SOFT 100 and WONK 0 with weights 300 to 600 (SIL OFL). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-soft100-wonk0-300-600.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Colour */
  --paper: #FAF7F2;
  --surface: #FFFFFF;
  --sunken: #F1ECE3;
  --line: #E6E1D8;
  --border: #7C838D;
  --ink: #1F2A37;
  --muted: #4A5563;
  --pine: #23675A;
  --pine-deep: #1B5248;
  --on-pine: #FFFFFF;
  --pine-tint: #DCEBE5;
  --lilac: #C9B8E8;
  --focus: #1F2A37;
  --try-again: #8A5A00;

  /* Type (rem, so text follows the visitor's text-size setting) */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --heading-axes: "SOFT" 100, "WONK" 0;
  --display-size: 3.25rem;    /* 52px */
  --display-line: 3.625rem;   /* 58px */
  --h1-phone-size: 2.125rem;  /* 34px */
  --h1-phone-line: 2.5rem;    /* 40px */
  --h2-size: 2.4rem;          /* WEBSITE_LAYOUT_v1: section headings 2.4rem desktop */
  --h2-line: 1.15;
  --h2-phone-size: 1.9rem;    /* and 1.9rem on phones */
  --h2-phone-line: 1.15;
  --hero-h1: clamp(2.25rem, 4.6vw, 4rem);
  --hero-h1-phone: 2.35rem;
  --section-gap: 48px;        /* space between sections: 48px phones, 80px desktop */
  --h3-size: 1.25rem;         /* 20px */
  --h3-line: 1.75rem;         /* 28px */
  --body-size: 1.125rem;      /* 18px */
  --body-line: 1.75rem;       /* 28px */
  --body-phone-size: 1rem;    /* 16px */
  --body-phone-line: 1.5rem;  /* 24px */
  --small-size: 0.875rem;     /* 14px */
  --small-line: 1.3125rem;    /* 21px */
  --button-size: 1.125rem;    /* 18px */
  --button-line: 1.5rem;      /* 24px */

  /* Space */
  --s4: 0.25rem; --s8: 0.5rem; --s12: 0.75rem; --s16: 1rem;
  --s24: 1.5rem; --s32: 2rem; --s48: 3rem; --s64: 4rem;
  --gutter: 20px;           /* WEBSITE_LAYOUT_v1: 20px side padding on phones, 40px from 768px */
  --max-width: 1200px;      /* WEBSITE_LAYOUT_v1: content max-width */
  --target: 48px;

  /* Shape */
  --radius-chip: 8px;
  --radius: 14px;
  --radius-pill: 999px;
}
@media (min-width: 768px) {
  :root { --gutter: 40px; --section-gap: 80px; }
}