/*
  Design tokens: the ONE place visual decisions live.

  Every colour, font, size and spacing value used by site.css comes from here.
  To change the look, change the values below. The HTML and site.css
  should not need to change.

  The design is a map / survey-sheet look: paper background, black ink,
  one red accent, blue grid lines, and coloured "transport line" stripes.
  It is light-only on purpose (the dark sections are part of the design).
*/

/* Fonts are served from this site (assets/fonts), not Google, so visitors'
   browsers don't contact Google. Both are under the SIL Open Font Licence. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour: paper and ink */
  --color-bg: #fbfaf5;          /* paper */
  --color-surface: #ffffff;     /* cards, form */
  --color-text: #1a1a1a;        /* ink */
  --color-text-2: #3e3d39;      /* secondary body text */
  --color-muted: #5a5a55;       /* captions, labels */
  --color-rule: #8a8880;        /* form field borders */
  --color-stone: #e4e1d6;       /* label tags */
  --color-cream: #f1e7c8;       /* coalition background, highlights */

  /* Colour: dark sections (vision, footer) */
  --color-dark: #1a1a1a;
  --color-dark-text: #fbfaf5;
  --color-dark-muted: #d9d7d0;
  --color-dark-rule: #3a3936;

  /* Colour: accent (buttons, logo, section numbers) */
  --color-accent: #c8261b;
  --color-accent-contrast: #ffffff;

  /* Colour: map details */
  --color-grid: rgba(31, 143, 209, 0.28);  /* blue grid lines */
  --color-grid-label: #1f6fa3;             /* grid numbers */
  --color-icon: #5db4ea;                   /* icons on dark */
  --color-stripe-1: #d6246e;               /* magenta line under header */
  --color-stripe-2: #f2c300;               /* yellow line between sections */
  --color-focus: #1f5fbf;
  --color-focus-on-dark: #f2c300;

  /* Type */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --weight-black: 900;
  --weight-display: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --stretch-display: 72%;   /* hero headline: tall and narrow */
  --stretch-heading: 75%;   /* section headlines */
  --stretch-label: 85%;     /* small caps headings */
  --leading: 1.55;
  --leading-tight: 1;

  /* Type scale (sizes from the design at full width, smaller on phones) */
  --size-mono: 0.75rem;                                   /* 12px labels */
  --size-small: 0.875rem;                                 /* 14px */
  --size-body: 1.0625rem;                                 /* 17px */
  --size-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);  /* 21px */
  --size-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);     /* 22px */
  --size-h2: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);       /* 56px */
  --size-h1: clamp(3.25rem, 1.8rem + 6vw, 5.5rem);        /* 88px */

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.75rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 5rem);  /* 80px section padding */

  /* Shape: square corners and heavy rules, like a printed map */
  --radius: 0;
  --border-width: 2px;
  --grid-size: 96px;
  --max-width: 75rem;   /* 1200px */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --measure: 40rem;
}