@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@500;700&display=swap');

:root {
  /* colors */
  --color-paper: #EEF0EA;
  --color-paper-dim: #E3E6DC;
  --color-ink: #12231A;
  --color-moss: #1F3A2B;
  --color-blaze: #FF4B12;
  --color-contour: #B9C2B3;
  --color-data: #0E6E5C;

  /* topbar: same color everywhere */
  --color-topbar-page: var(--color-moss);
  --color-topbar-map: var(--color-moss);

  /* fonts */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-data: 'IBM Plex Mono', monospace;
}

/* usage rules (see 711trailmap-brand-brief.md for full rationale):
   - --color-blaze only for CTAs, the GPX trace line, and live status — never as a large fill
   - --color-moss carries surfaces / nav
   - --color-paper is the base background, --color-paper-dim for subtle card contrast
   - --font-data is reserved for numbers: distance, elevation, coordinates, timestamps
   - --font-display for headlines and the wordmark, weight 700 for hero, 500 elsewhere
   - --font-body for all running text */