/* BlueGill Adventures: design tokens. Source of truth: DESIGN.md */
:root {
  /* colour */
  --ink: #14202e;
  --paper: #f6f2ea;
  --white: #ffffff;
  --timber: #ead7b7;
  --line: #d9d1c3;
  --muted: #5b6573;
  --muted-on-ink: #aab3bf;   /* secondary text on ink sections, 7.8:1 */
  --blue: #1d4f9c;
  --blue-dk: #163d78;
  --hivis: #f26b1d;
  --hivis-dk: #c2500f;
  --ok: #2f7d4f;
  --error: #b42318;

  /* type */
  --font: "Archivo", "Arial Narrow", Arial, sans-serif;
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;
  --measure: 68ch;

  /* spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --max: 1160px;
  --gutter: 16px;

  /* shape */
  --r-0: 0;
  --r-sm: 4px;
  --focus-color: var(--blue);     /* on paper, white, timber */
  --focus-on-dark: var(--paper);  /* on ink sections and the sticky bar, 14.7:1 */
  --focus: 3px solid var(--focus-color);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }