/* STEP — The Recorded Cycle. Every colour in the site resolves here (see DESIGN.md). */
:root {
  /* steel ground */
  --ground: #f2f3f5;
  --ground-2: #e8eaee;
  --surface: #ffffff;
  --rule: #d5d9e0;
  --rule-soft: #e6e9ee;
  --ink: #12161d;
  --ink-2: #3f4653;
  --ink-3: #5e6572;

  /* logo navy owns regions */
  --navy: #062a6a;
  --navy-2: #17376f;
  --navy-deep: #041d4b;
  --on-navy: #ffffff;
  --on-navy-2: #b8c4dc;
  --on-navy-rule: #26427a;

  /* logo red: steprule + primary action only */
  --red: #e30613;
  --red-press: #b3040f;

  /* data */
  --data: #0a7d72;
  --cool: #17376f;            /* steel below visible glow */
  --heat-550: #4a1410;
  --heat-650: #7d1a12;
  --heat-750: #b0241a;
  --heat-850: #d8451d;
  --heat-950: #ef7d22;
  --heat-1050: #f6b132;

  --shadow-header: 0 1px 0 var(--rule), 0 6px 18px -12px rgb(6 42 106 / 0.35);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy-2);

  /* type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-wall: clamp(4rem, 12vw, 9.5rem);
  --fs-display: clamp(2.5rem, 4.4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.9vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.6vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-data: 0.75rem;
  --fs-2xs: 0.6875rem;          /* SVG chart labels */

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --section: clamp(80px, 11vw, 136px);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;

  --r-xs: 2px;
  --r-sm: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}