/* Northline design tokens (draft, 2026-10-29).
   One source for color, type and spacing. Page styles must use these
   variables instead of raw values. Direction: parking-lot asphalt as the
   dominant color, line-paint yellow as the one sharp accent, cool light grey
   paper (no cream/beige). Type: Archivo (variable width) + IBM Plex Mono
   for data, timestamps and prices. Both fonts are SIL OFL, self-hosted. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

:root {
  /* Color: dominant */
  --asphalt-900: #161d20;
  --asphalt-800: #1e272b;
  --asphalt-700: #2b363b;
  --asphalt-500: #56656b;
  --asphalt-300: #9eabb0;
  /* Color: accent (line paint). Use as fill or on dark only, never as text on light. */
  --paint: #ffc928;
  --paint-deep: #e0a800;
  /* Color: light surfaces (cool grey, not cream) */
  --paper: #eef1f1;
  --paper-raised: #ffffff;
  --rule: #c9d1d3;
  --rule-strong: #8d999d;
  /* Color: text */
  --ink: #12181a;
  --ink-muted: #46524f;
  --ink-on-dark: #f1f4f4;
  --ink-on-dark-muted: #b7c2c4;
  /* Color: grade states (sparingly, as text) */
  --grade-pass: #1f6b43;
  --grade-watch: #8a5300;
  --grade-fail: #a2231b;
  --focus: #ffc928;
  /* Color: illustrations (v2) */
  --illo-sky: #dbe5e8;
  --illo-soft: #c6d0d3;

  /* Type families */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --stretch-display: 84%;
  --stretch-body: 100%;

  /* Type scale (minor third-ish, fluid at the top end) */
  --step--2: 0.78rem;
  --step--1: 0.9rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.35rem + 1.6vw, 2.35rem);
  --step-4: clamp(2.2rem, 1.45rem + 3.1vw, 3.6rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem);
  --leading-tight: 1.04;
  --leading-snug: 1.22;
  --leading-body: 1.58;
  --measure: 66ch;

  /* Spacing (deliberately uneven steps so sections don't share one rhythm) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* Layout */
  --page-max: 1200px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
  --radius: 3px;
  --tap: 44px;
}