/* NORDIC design tokens: stealth.
   One dark world on purpose, like an instrument at night: near-black graphite
   with a faint green cast, hairline rules, and tactile-indicator yellow as the
   only signal colour. Detection colours are semantic and appear only in the
   demo and the technical visuals. Layout: full-bleed bands, a 1240 px measure,
   hairline grids and bracketed instrument panels. */

@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-var-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Wide";
  src: url("../fonts/ArchivoVariable-wdth.woff2") format("woff2-variations"), url("../fonts/ArchivoVariable-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* surfaces, darkest to lightest */
  --asphalt: #070909;        /* instrument stages: viewer, demo, drawings */
  --paper: #0b0e0f;          /* page */
  --paper-2: #0e1213;        /* alternate band */
  --asphalt-2: #12171a;      /* raised surface on a stage */
  --rule: #1e2528;           /* hairlines */
  --asphalt-line: #1c2326;   /* hairlines on a stage */
  --rule-2: #2c3539;         /* stronger hairline, frames */

  /* ink */
  --ink: #e4e8e5;            /* primary text */
  --ink-2: #a0a9ac;          /* secondary text */
  --ink-3: #737d81;          /* tertiary text, labels (>= 4.5:1 on --paper) */
  --on-asphalt: #e4e8e5;
  --on-asphalt-2: #959fa3;

  /* signal */
  --tactile: #f2b807;        /* tactile ground indicator yellow: the one accent */
  --tactile-ink: #0b0e0f;    /* text placed on yellow */
  --tactile-dim: rgba(242, 184, 7, 0.14);
  --cane-red: #d0242f;       /* the cane's band */

  /* semantic (demo + visuals only) */
  --drop: #4c9be8;
  --rise: #f2b807;
  --obstacle: #ee7a3c;
  --overhead: #b58cf0;
  --ok: #63c08f;
  --neutral: #6f797d;

  /* type */
  --font: "Atkinson Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "Atkinson Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Archivo Wide", "Archivo", "Atkinson Next", system-ui, sans-serif;
  --step--2: 0.75rem;        /* 12px labels */
  --step--1: 0.875rem;       /* 14px */
  --step-0: 1.0625rem;       /* 17px body */
  --step-1: 1.25rem;         /* 20px */
  --step-2: 1.625rem;        /* 26px */
  --step-3: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --step-4: clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
  --step-5: clamp(3.6rem, 1rem + 10.5vw, 10.5rem);
  --leading: 1.55;
  --track-label: 0.14em;

  /* space */
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 62ch;
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-pill: 2px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .1, 1);
}