/* Walkably design tokens: the one place a colour, font, size or timing is declared. Every page links this file
   (the map app, the city and district pages, /about, /404, /design). Components live in walkably.css.
   The look is the Cerda proof (docs/design/proof-cerda/CONCEPT.md): a technical drawing sheet. Paper, rules, ink,
   one blue. Colours are Radix mauve and blue steps; nothing else is on the page. /design/ shows every value in use. */
:root{
  /* colour */
  --paper:#fdfcfd;      /* mauve 1: the sheet */
  --tint:#f2eff3;       /* mauve 3: the one selected row, a hovered row, water */
  --rule:#dbd8e0;       /* mauve 6: every light rule */
  --hatch:#8e8c99;      /* mauve 9: hatch strokes, hairlines (non-text only) */
  --ink-2:#65636d;      /* mauve 11: secondary text */
  --ink:#211f26;        /* mauve 12: line work, numerals, the strong rule, buttons */
  --ink-hover:#3a3742;  /* a dark button under the pointer */
  --blue:#0090ff;       /* blue 9: selection, focus ring */
  --blue-text:#0d74ce;  /* blue 11: links, menu items */
  --vermilion:#c8341b;  /* worse than most */
  --good:#1d7148;       /* better than most */
  /* the phone sheet and the search list sit over the map: 0.4% see-through, so Chrome does not drop the part of the
     map canvas they cover (its occlusion check flips the WebGL canvas and blanks the wrong strip; seen 4 Oct 2026) */
  --paper-veil:rgb(253 252 253 / .996);
  /* the walkability ramp: five greys, palest = harder to walk (app.js RAMP, build.py GREYS) */
  --h0:#f3f1f4; --h1:#e8e5eb; --h2:#dcd8e0; --h3:#cbc7d1; --h4:#b5b1bd;
  /* the district map: the ink at five strengths (whole districts need darker fills than 55 m cells) */
  --d0:#e4e1e8; --d1:#c3bfca; --d2:#9a95a3; --d3:#6c6775; --d4:#3b3842;

  /* type */
  --f-display:"Sono", ui-monospace, "SF Mono", Menlo, monospace;                               /* numerals, letters on the map */
  --f-body:"Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;      /* everything else */
  /* the reading scale: 1.25 on an 18 px body, clamped between 390 and 1440 px wide (city, district and about pages) */
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1.06rem,.98rem + .35vw,1.25rem);
  --step-1:clamp(1.25rem,1.18rem + .3vw,1.4rem);
  --step-2:clamp(1.5rem,1.38rem + .5vw,1.75rem);
  --step-3:clamp(1.9rem,1.7rem + .9vw,2.4rem);
  --step-big:clamp(2rem,1.6rem + 1.6vw,3rem);   /* the hero numbers */

  /* layout: one 4 px grid; the sheet is 1180 px wide with a 24 px gutter (16 px on a phone); text runs to 34 em */
  --wrap:1180px;
  --gutter:24px;
  --gutter-m:16px;
  --measure:34em;
  --r:3px;              /* the one corner radius: buttons, menu, inputs */
  /* the business pages (/business/): a wider sheet, led by the map, with a sticky title row */
  --wrap-wide:1360px;
  --gutter-wide:40px;
  --nav-h:64px;
  --step-4:clamp(2.2rem,1.6rem + 2vw,3.2rem);   /* the business hero heading */
  --hatchfill:repeating-linear-gradient(135deg,transparent 0 3.2px,var(--hatch) 3.2px 4px);   /* planned, not yet there */

  /* motion: feedback under 200 ms, one easing out, one in */
  --dur:180ms;
  --ease-out-3:cubic-bezier(.33,1,.68,1);
  --ease-out-4:cubic-bezier(.25,1,.5,1);
  --ease-in-3:cubic-bezier(.32,0,.67,0);
  color-scheme:light;
}

/* The map app (index.html, <html class="map-app">): a panel, not a reading page. A 1.25 scale on 16 px, a slower
   180 -> 200 ms, and the title block's widths. Declared here so no page carries a second token block. */
.map-app{
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(.95rem,.93rem + .1vw,1rem);
  --step-1:clamp(1.15rem,1.1rem + .2vw,1.25rem);
  --step-2:clamp(1.4rem,1.32rem + .35vw,1.56rem);
  --step-3:clamp(1.7rem,1.55rem + .6vw,1.95rem);
  --dur:200ms;
  --sheet-w:460px;      /* the title block on the right */
  --peek:136px;         /* how much of the phone sheet shows when it is closed */
}
@media (max-width:1180px) and (min-width:900px){.map-app{--sheet-w:416px}}   /* 416: logo and four header links on one row (16 Oct) */