/* "Pit dial". Galvanised lid, enamel face, one red needle. Palette kept as lane a drew it
   (design note 1). Roles, not names; contrast pairs are measured in THEME.md. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  --c-bg: #e4e8e6;          /* the lid: galvanised steel, cool and pale */
  --c-face: #fbfbf7;        /* the dial face: enamel */
  --c-sunk: #d6dbd8;
  --c-line: #c2c9c5;
  --c-line-strong: #87918d;
  --c-ink: #13171a;
  --c-ink-2: #434c50;
  --c-needle: #b8231b;      /* the one accent: what you must plan for, and the line you must reach */
  --c-on-needle: #ffffff;
  --c-focus: #0b57d0;

  /* smoker temperature, cool to hot; the only other hues on the page */
  --c-t225: #365a70;
  --c-t250: #7d6852;
  --c-t275: #b0692c;
  --c-t300: #8f3a23;

  --f-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --stretch-plate: 112%;    /* stamped, wide numerals of a gauge plate */
  --stretch-body: 100%;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-plate: clamp(2.75rem, 13.5vw, 4.25rem);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius: 14px;
  --radius-sm: 8px;
  --hit: 44px;
  --measure: 44rem;

  --shadow-face: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(19,23,26,.10), 0 8px 24px -12px rgba(19,23,26,.28);
  --shadow-menu: 0 2px 4px rgba(19,23,26,.12), 0 16px 32px -12px rgba(19,23,26,.35);

  --ease-sweep: cubic-bezier(.2, .8, .2, 1);
  --dur-sweep: 900ms;
  --dur-draw: 700ms;
  --dur-ui: 140ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #101315;
    --c-face: #1a1e20;
    --c-sunk: #22272a;
    --c-line: #30373a;
    --c-line-strong: #5b6569;
    --c-ink: #eef0ee;
    --c-ink-2: #a8b1b4;
    --c-needle: #ff6d5e;
    --c-on-needle: #1a0704;
    --c-focus: #8ab4f8;
    --c-t225: #86aec6;
    --c-t250: #c7ae93;
    --c-t275: #f0a862;
    --c-t300: #e57d5f;
    --shadow-face: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-menu: 0 16px 32px -12px rgba(0,0,0,.8);
  }
}