/* Design tokens. Soft, warm and calm: neat but not clinical, friendly but not cute.
   Palette revised 11 Oct 2026 at Carl's request (supersedes the navy-led palette in BUILD.md §6). */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/worksans-latin.woff2") format("woff2");
}

:root {
  /* Ink: a soft slate rather than black or navy */
  --colour-ink: #2F3B45;
  --colour-ink-soft: #4A5661;
  --colour-muted: #5F6A73;

  /* Fields */
  --colour-paper: #FBF8F3;      /* warm white page */
  --colour-card: #FFFFFF;
  --colour-mist: #E8EEF1;       /* soft blue band */
  --colour-sand: #F3ECE3;       /* warm band */
  --colour-line: #E6DFD5;

  /* Accents */
  --colour-sage: #A9C1AE;
  --colour-sage-soft: #E5EDE6;
  --colour-sage-deep: #4E6B57;  /* text-safe green */
  --colour-clay: #A65D40;       /* primary buttons: white text passes 4.5:1 */
  --colour-clay-dark: #8F4E34;
  --colour-clay-soft: #F6E7DF;
  --colour-danger: #A8423A;
  --colour-danger-soft: #F8E6E3;

  /* Legacy names used by admin.css and emails */
  --colour-accent: var(--colour-sage);
  --colour-accent-ink: var(--colour-sage-deep);
  --colour-accent-soft: var(--colour-sage-soft);

  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 1.0625rem;
  --leading: 1.65;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(47, 59, 69, .04), 0 12px 32px rgba(47, 59, 69, .07);
  --shadow-lift: 0 2px 4px rgba(47, 59, 69, .05), 0 20px 48px rgba(47, 59, 69, .10);

  /* 4px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  --container: 1160px;
  --gutter: 20px;
}
@media (min-width: 760px) {
  :root { --gutter: 32px; }
}