/*
 * Design tokens, taken from the design canvas (hexplace/design/canvas). Every colour, size and
 * radius used anywhere is defined here; components and pages only reference these names.
 */
:root {
  /* ---- ground and surfaces */
  --ground: #f4f5f2;
  --surface: #ffffff;
  --surface-sunk: #f6f7f4;      /* tiles, pills, table headers inside cards */
  --surface-input: #f9faf8;
  --surface-tint: #f7fafc;      /* "last month vs normal" style panels */
  --surface-dark: #16191d;      /* hero band, comparison block, CTA band */
  --surface-dark-2: #22262b;    /* tiles and inputs on dark */
  --stage: #e9ece7;             /* embed preview stage */
  --sea: #eaf2f6;               /* map canvas */

  /* ---- ink */
  --ink: #16191d;
  --ink-2: #2a2f35;             /* secondary copy: leads, reasons, body in cards */
  --muted: #59606a;
  --on-dark: #f4f5f2;
  --on-dark-muted: #c8cdd3;
  --on-dark-link: #9cc4e4;

  /* ---- lines */
  --line: #dde1dc;              /* card borders */
  --line-strong: #c9cec8;       /* inputs, outline buttons, dashed gaps */
  --divider: #e6e9e4;           /* rows and inner frames inside cards */
  --line-dark: #3a3f45;

  /* ---- brand */
  --accent: #1f5f8b;
  --accent-ink: #134566;
  --accent-tint: #eef4f8;       /* good-fit items, winner cells, theme badge */
  --warm: #b4480f;
  --warm-ink: #8a3509;
  --warm-tint: #fbf1ea;         /* weaker-fit items */

  /* ---- precision tones */
  --tone-town-bg: #ddebf4;
  --tone-town-ink: #134566;
  --tone-modelled-bg: #fce8d9;
  --tone-modelled-ink: #8a3509;
  --tone-regional-bg: #ecedea;
  --tone-regional-ink: #3a3f45;

  /* ---- data colours (charts); every ramp validated (dataviz skill) */
  --chart-high: #b4480f;
  --chart-low: #6a9bc3;
  --chart-band: #f2c9ae;
  --chart-crowd-mid: #e3a47c;   /* crowd index, medium (design: Region) */
  --seq-1: #86b6ef;
  --seq-2: #5598e7;
  --seq-3: #2a78d6;
  --seq-4: #1c5cab;
  --seq-5: #104281;

  /* ---- type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* ---- shape and space */
  --radius-card: 12px;
  --radius-inner: 10px;
  --radius-control: 8px;
  --radius-small: 6px;
  --radius-pill: 999px;
  --content: 1200px;            /* content width, excluding the side gutters */
  --gutter: 24px;
  --gap-page: 28px;             /* between top-level blocks */
  --gap-column: 20px;           /* between cards in a column */
}