/* =====================================================================
   Dispatch · design tokens
   Light is "Day freight" (concrete and card stock); dark is "Night freight".
   --orange carries meaning (buttons, links, the live step); --hivis is the
   loud orange for marks on dark grounds; --cold is the cold-chain blue for
   temperature and tracking data. Thermal label stock stays white in both modes.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f1efe9;
  --card: #fbfaf7;
  --well: #e6e3db;
  --line: #d3cec3;
  --ink: #15171a;
  --ink-2: #363a40;
  --muted: #5b5f63;
  --orange: #b83c0a;
  --orange-2: #962f06;
  --on-orange: #ffffff;
  --orange-soft: #f8e1d4;
  --hivis: #ff6a2b;
  --cold: #1f55c4;
  --cold-soft: #dfe8fa;
  --alert: #b42318;
  --stock: #ffffff;
  --stock-ink: #111214;
  --focus: #1f55c4;
  --shadow-card: 0 1px 0 rgba(21, 23, 26, 0.06), 0 8px 20px -14px rgba(21, 23, 26, 0.3);
  --shadow-lift: 0 2px 0 rgba(21, 23, 26, 0.05), 0 24px 44px -24px rgba(21, 23, 26, 0.42);
  --shadow-stock: 0 1px 1px rgba(0, 0, 0, 0.12), 0 14px 26px -14px rgba(0, 0, 0, 0.45);
  --shadow-press: inset 0 1px 2px rgba(21, 23, 26, 0.16);

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(52px, 7.4vw, 116px);
  --fs-h2: clamp(38px, 4.8vw, 70px);
  --fs-h3: 26px;
  --fs-lead: clamp(17.5px, 1.4vw, 21px);
  --fs-body: 17px;
  --fs-small: 14.5px;
  --fs-label: 10.5px;

  --wrap: 1240px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-xs: 2px;
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --haul: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 150ms;
  --d: 280ms;
  --d-slow: 700ms;
}

/* ---------- Night freight ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1012;
    --card: #181a1d;
    --well: #131517;
    --line: #2b2e33;
    --ink: #f1efe9;
    --ink-2: #cfccc4;
    --muted: #9a9d9f;
    --orange: #ff8a4c;
    --orange-2: #ffa774;
    --on-orange: #1a0a02;
    --orange-soft: #3a1c0c;
    --cold: #86aeff;
    --cold-soft: #16233f;
    --alert: #ff8a7a;
    --focus: #86aeff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 28px 50px -24px rgba(0, 0, 0, 0.9);
    --shadow-stock: 0 1px 1px rgba(0, 0, 0, 0.4), 0 18px 30px -14px rgba(0, 0, 0, 0.85);
    --shadow-press: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1012;
  --card: #181a1d;
  --well: #131517;
  --line: #2b2e33;
  --ink: #f1efe9;
  --ink-2: #cfccc4;
  --muted: #9a9d9f;
  --orange: #ff8a4c;
  --orange-2: #ffa774;
  --on-orange: #1a0a02;
  --orange-soft: #3a1c0c;
  --cold: #86aeff;
  --cold-soft: #16233f;
  --alert: #ff8a7a;
  --focus: #86aeff;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 28px 50px -24px rgba(0, 0, 0, 0.9);
  --shadow-stock: 0 1px 1px rgba(0, 0, 0, 0.4), 0 18px 30px -14px rgba(0, 0, 0, 0.85);
  --shadow-press: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}