/* Ayer Shipping - design tokens. The only place raw values live. See site/STYLEGUIDE.md. */
@font-face{font-family:"Big Shoulders";src:url("/fonts/big-shoulders-display.woff2") format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Big Shoulders Stencil";src:url("/fonts/big-shoulders-stencil-900.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-mono.woff2") format("woff2");font-weight:400 600;font-display:swap}

:root{
  /* colour: brand */
  --c-graphite:#2B2E31;
  --c-graphite-deep:#1E2023;
  --c-steel:#5E6368;
  --c-steel-light:#A3A7AB;
  --c-concrete:#F2F1EE;
  --c-concrete-line:#D6D4CE;
  --c-signal:#FFD100;
  --c-white:#FFFFFF;
  /* no red: the lane forbids it. Errors are shown by text + a graphite "!" tag on a yellow marker, not by colour */
  --c-grid-dark:#3A3E42;      /* grid lines on dark grounds */

  /* colour: roles */
  --bg:var(--c-concrete);
  --ink:var(--c-graphite);
  --ink-soft:var(--c-steel);
  --rule:var(--c-concrete-line);
  --accent:var(--c-signal);
  --bg-dark:var(--c-graphite);
  --bg-deep:var(--c-graphite-deep);
  --ink-on-dark:var(--c-concrete);
  --ink-soft-on-dark:var(--c-steel-light);
  --focus:var(--c-graphite);
  --focus-on-dark:var(--c-signal);

  /* type families */
  --f-display:"Big Shoulders","Arial Narrow",sans-serif;
  --f-stencil:"Big Shoulders Stencil","Big Shoulders","Arial Narrow",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;

  /* type scale (mobile; desktop values applied at --bp-lg below) */
  --t-h1:2.75rem;      /* 44px */
  --t-h2:2rem;         /* 32px */
  --t-h3:1.25rem;      /* 20px */
  --t-body:1.0625rem;  /* 17px */
  --t-small:0.9375rem; /* 15px */
  --t-label:0.75rem;   /* 12px */
  --t-stencil:4.5rem;  /* section numbers */
  --lh-h1:0.95; --lh-h2:1; --lh-h3:1.25; --lh-body:1.55; --lh-label:1.3;
  --track-label:0.12em;
  --measure:68ch;

  /* spacing: 4px base */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem;
  --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --gutter:1rem;             /* phone side gutter */
  --max:75rem;               /* 1200px content width */

  /* shape */
  --radius:0;
  --radius-input:2px;
  --rule-w:1px;
  --bracket-w:4px;           /* corner marker thickness on screen */
  --bracket-len:1.25rem;

  /* motion */
  --dur-fast:120ms; --dur:220ms; --dur-slow:900ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* breakpoints (reference only; CSS uses the px values directly) */
  --bp-md:48rem;   /* 768px */
  --bp-lg:75rem;   /* 1200px */
}
@media (min-width:48rem){
  :root{--t-h1:4rem;--t-h2:2.5rem;--t-h3:1.375rem;--t-stencil:6rem;--gutter:2rem}
}
@media (min-width:75rem){
  :root{--t-h1:5.5rem;--t-h2:3.25rem;--t-h3:1.5rem;--t-body:1.125rem;--t-label:0.8125rem;--t-stencil:8rem;--gutter:2.5rem}
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur:0ms;--dur-slow:0ms}
}