/* Design tokens shared by all pages (matches the UI design canvas). */
:root {
  --pond: #0E3B4A;
  --pond-2: #154B5C;
  --lane-a: #1A5F73;
  --lane-b: #17566A;
  --ink: #0B2530;
  --cream: #FFF8E7;
  --paper: #F5F1E6;
  --duck: #FFC93C;
  --boost: #7CF0C8;
  --stumble: #FF6B4A;
  --danger: #B4321A;
  --muted: #4A5C63;
  --font-display: 'Bricolage Grotesque', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-body); }
[hidden] { display: none !important; }
button { font-family: inherit; }
input, button { font-size: inherit; }
:focus-visible { outline: 3px solid var(--duck); outline-offset: 2px; }
.display { font-family: var(--font-display); font-weight: 800; }
.eyebrow { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums; }