/* The web mirror of DESIGN.md (the hybrid look, owner pick Q-20). DESIGN.md is the source of truth;
   tests/site/test_tokens.py fails if a value here disagrees with it. iOS takes the same values in M6.
   One file to include: tokens plus self-hosted fonts (consumer-law guard C-2: nothing third-party). */

/* Fonts, DESIGN.md section 2. SIL OFL 1.1 texts sit beside the files. */
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/barlow-condensed-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/barlow-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/barlow-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/lora-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("fonts/lora-600-italic.woff2") format("woff2");
}

:root {
  /* Section 1: the map is printed paper */
  --paper: #fefffe;
  --ink: #636961;
  --label-ink: #4a5049;
  --ui-text: #23272d;
  --ground-park: #c1d5cb;
  --ground-built: #dfe4e2;
  --water-fill: #bcd3ec;
  --water-edge: #4f86c6;
  --water-label: #1f4670;
  --boundary: #8b6b4a;
  --tan: #bcbba8;
  --road-motorway-casing: #3d4642;
  --road-motorway-fill: #efd58b;
  --road-motorway-casing-px: 6.8px;
  --road-motorway-fill-px: 4.6px;
  --road-primary-casing: #3d4642;
  --road-primary-fill: #f6efd2;
  --road-primary-casing-px: 5.4px;
  --road-primary-fill-px: 3.4px;
  --road-secondary: #636961;
  --road-secondary-px: 2.2px;
  --road-tertiary: #8b8e84;
  --road-tertiary-px: 1.5px;
  --road-residential: #a9aca1;
  --road-residential-px: 1px;

  /* Section 2: lettering, spacing, radius */
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --font-text: "Barlow", "Barlow Fallback", system-ui, sans-serif;
  --font-natural: "Lora", "Lora Fallback", Georgia, serif;
  --text-11: 11px;
  --text-13: 13px;
  --text-15: 15px;
  --text-24: 24px;
  --text-30: 30px;
  --text-76: 76px;
  --text-104: 104px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --radius-window: 16px;
  --radius-control: 10px;
  --touch-target: 52px;
  --hairline: 1px;
  --dotted-rule: 1.5px;
  --district-label-size: 12px;
  --district-label-tracking: 0.24em;
  --upper-tracking: 0.06em;

  /* Section 3: the route is a dotted trail */
  --route: #2a43a0;
  --route-dot: 4.6px;
  --route-pitch: 11px;
  --route-driven: 3.8px;
  --car-node-ring: #2a43a0;

  /* Section 4: stage, frame, cobalt accent, alarm */
  --stage: #24272a;
  --stage-tone: #2f3438;
  --stage-border: #3a4045;
  --stage-contour: #343a3f;
  --text-on-dark: #e9ebe6;
  --text-dim: #aab0a8;
  --accent-on-dark: #8aa6f5;
  --accent-fill: #3b57c4;
  --accent-on-paper: #2a43a0;
  --alarm-on-paper: #b3261e;
  --alarm-on-dark: #ff8a7d;
  --button-ring: 2px;

  /* Section 4: motion */
  --motion-window-open: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}