/* Design tokens for the Mile Zero Freight site. The only file with colour values.
   The token names stay the same in the two themes: navy is the type colour, white is the card surface. */
/* The pages link this file before site.css. They also preload the three fonts, because the first screen
   uses all three: Castoro for the h1, Ilisarniq Regular for the text, Ilisarniq Demi for the buttons and the labels.
   The browser then gets the fonts at the same time as the CSS. If a font URL changes here, change it there too. */
@font-face { font-family: "Ilisarniq"; src: url("/design/fonts/ilisarniq/Ilisarniq-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ilisarniq"; src: url("/design/fonts/ilisarniq/Ilisarniq-Demi.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Headlines: Castoro by Tiro Typeworks (Vancouver), SIL Open Font License 1.1. Licence text beside the file.
   Weight 400 and Latin only (17 KB in place of 57 KB): make-web-font.sh beside the file makes it from Castoro-VF.woff2. */
@font-face { font-family: "Castoro"; src: url("/design/fonts/castoro/Castoro-Regular-Latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --font: "Ilisarniq", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Castoro", Georgia, serif;

  --navy: #0c1f3a;
  --navy-70: rgba(12, 31, 58, 0.70);
  --navy-40: rgba(12, 31, 58, 0.40);
  --navy-12: rgba(12, 31, 58, 0.12);
  --navy-08: rgba(12, 31, 58, 0.08);
  --action: #f87103;        /* safety orange: buttons, focus rings. The Hi-vis palette, chosen 2026-10-17 */
  --action-hover: #dc6302;
  --light: #8fc8e8;         /* the map dots: scene/map-texture.js copies it, because a canvas cannot read CSS */
  --fog: #dde6f0;
  --page: #f7f8fa;
  --white: #ffffff;
  --credit: #5e5e5e;        /* the "Google Maps" credit under the address suggestions: a colour that Google sets */
  --header-bg: rgba(247, 248, 250, 0.78);
  --link: #0c1f3a;          /* links are navy with an orange underline: orange text on the page is too faint to read */
  --on-action: #0c1f3a;     /* navy text on an orange button: white on this orange is 2.9 to 1, under the 4.5 minimum */
  color-scheme: light;

  --h1: 64px; --h2: 40px; --h3: 24px; --lead: 20px; --body: 17px; --small: 14px; --button: 16px; --label: 13px;
  --lh-h1: 1.04; --lh-h2: 1.1; --lh-h3: 1.2; --lh-body: 1.5; --lh-small: 1.45;
  --track-h1: -0.015em; --track-h2: -0.01em; --track-h3: -0.005em; --track-label: -0.005em;

  --s0: 4px; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px;
  --content: 1120px; --gutter: 32px; --section: 96px; --header-h: 64px;
  --control-h: 40px; --field-h: 44px;
  --r-control: 6px; --r-form: 10px; --r-card: 12px;
  --shadow: 0 1px 2px rgba(12, 31, 58, 0.04), 0 12px 32px rgba(12, 31, 58, 0.08);
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--action);
  --scene-h: 620px;
}

/* The dark theme. Light is the default for everyone; dark is a choice behind the toggle in the header, which sets
   data-theme="dark" on the html element and keeps it in localStorage. The system setting is not read.
   page: the brand navy, deeper. white: the card surface, one step lighter than the page.
   navy: off-white type. navy-70: the soft grey step. navy-12 and navy-08: hairlines at a low alpha.
   action: the button colour does not change. link: a light blue, for text on the dark page. */
:root[data-theme="dark"] {
  --navy: #e8ecf2;
  --navy-70: rgba(232, 236, 242, 0.64);
  --navy-40: rgba(232, 236, 242, 0.40);
  --navy-12: rgba(232, 236, 242, 0.12);
  --navy-08: rgba(232, 236, 242, 0.07);
  --link: #5f8ae8;
  --fog: rgba(232, 236, 242, 0.08);
  --page: #0b1220;
  --white: #141c2c;
  --credit: #ffffff;
  --header-bg: rgba(11, 18, 32, 0.78);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.32);
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--link);
  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --h1: 40px; --h2: 28px; --h3: 20px; --lead: 18px; --body: 16px; --label: 11px; --gutter: 16px; --section: 56px; --header-h: 60px; --scene-h: 300px; }
}