/* turf: a printed city map. Paper, ink, water, and one red that means "taking". Every colour, font, radius and
   easing the site uses is a token; base.css and turf.css only read them. The crew inks live in shared/turf.mjs
   because the map draws with them; they appear only inside maps, swatches and crests, never as decoration. */
:root {
  color-scheme: light;

  /* map paper, and the steps of it */
  --bg: #ECE6D8;
  --bg-2: #E6DFCF;
  --surface: #F4F0E6;
  --surface-2: #E3DCCB;
  --lot: #D9D0BC;      /* an open block */
  --water: #CDD9D8;    /* the sea and the river */

  /* hairlines, in ink */
  --line: rgba(28, 26, 22, 0.12);
  --line-2: rgba(28, 26, 22, 0.24);
  --line-3: rgba(28, 26, 22, 0.42);

  /* ink */
  --ink: #1C1A16;
  --ink-2: #4A453C;
  --muted: #6B6457;

  /* ONE accent, ONE meaning: taking. The main action (Launch a coin) and a block changing hands. Nothing else. */
  --accent: #C9341A;
  --on-accent: #FFF8EE;

  /* states only, never decoration */
  --good: #2F6B3A;
  --bad: #B3261E;
  --warn: #8A5A00;

  /* display shouts (city signage), text talks, mono keeps the receipts and the grid refs */
  --font-display: "Big Shoulders Display", "Archivo Narrow", "Arial Narrow", sans-serif;
  --font-text: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;

  /* flat print: small corners, hairlines, no blur. One hard offset shadow, on the primary button only. */
  --r-sm: 3px;
  --r: 4px;
  --r-lg: 6px;
  --r-pill: 999px;
  --border: 1px solid var(--line-2);
  --shadow: none;
  --press: 2px 2px 0 var(--ink);

  /* quick out, settles exactly */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t: 260ms;
  --t-take: 900ms;

  --wrap: 1280px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 64px;
}