/* Landfall design tokens: Dispatch Board (judged and locked, see DESIGN_SYSTEM.md).
   HHN palette. Green, amber and red mean fax state and nothing else. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plexmono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* brand (fixed in both themes) */
  --navy: #09315D;
  --blue: #0F54AA;
  --bright: #1A92D0;
  --teal: #3BC1C6;

  /* surfaces and text */
  --bg: #FFFFFF;
  --surface: #F2F6FB;
  --surface-2: #E7EEF7;
  --line: #D3DDEA;
  --line-strong: #9FB1C8;
  --ink: #14233A;
  --muted: #475A74;
  --link: #0F54AA;
  --ring: #0F54AA;
  --on-fill: #FFFFFF;

  /* action fills */
  --pri: #0F54AA;
  --pri-hover: #09315D;
  --pri-ink: #FFFFFF;

  /* tones: ok = arrived, bad = failed, warn = needs a person soon, wait = moving, muted = nothing yet */
  --ok: #1E8E5A;      --ok-text: #17683F;   --ok-tint: #E3F4EB;
  --bad: #C0392B;     --bad-text: #A52E22;  --bad-tint: #FBE7E4;
  --warn: #B7791F;    --warn-text: #80530A; --warn-tint: #FBF0D9;
  --wait: #0F54AA;    --wait-text: #0F54AA; --wait-tint: #E1ECF9;
  --mute: #6B7C93;    --mute-text: #475A74; --mute-tint: #EEF2F7;

  /* stepper */
  --step-done: #0F54AA;
  --step-ok: #1E8E5A;
  --step-track: #D3DDEA;

  /* HOLD banner */
  --hold-bg: #FDF1D3;
  --hold-ink: #5A3C08;
  --hold-line: #B7791F;

  /* header */
  --top-bg: #09315D;
  --top-ink: #FFFFFF;
  --top-soft: #D4E2F3;

  /* type */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-num: 40px;

  /* space, radius, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --r-sm: 6px; --r-md: 10px; --r-pill: 999px;
  --gutter: 28px;
  --maxw: 1360px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --shadow-pop: 0 8px 28px rgba(9, 49, 93, .18);
}

/* First load is always light. Dark is only an explicit choice (the theme toggle stores lf_theme). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1524; --surface: #122238; --surface-2: #1A304D; --line: #2B4263; --line-strong: #4A6488;
  --ink: #E8EEF6; --muted: #A9B8CC; --link: #7DBBF2; --ring: #5DB8F0; --on-fill: #0B1524;
  --pri: #2D74D0; --pri-hover: #3B84E0; --pri-ink: #FFFFFF;
  --ok: #3FB57E;   --ok-text: #5FD09A;   --ok-tint: #12342A;
  --bad: #E5675A;  --bad-text: #F59388;  --bad-tint: #3D1A19;
  --warn: #D9A046; --warn-text: #EDBE6B; --warn-tint: #3A2D12;
  --wait: #5DA6EE; --wait-text: #8CC2F5; --wait-tint: #15335A;
  --mute: #7F93AE; --mute-text: #A9B8CC; --mute-tint: #16273E;
  --step-done: #4D9DE8; --step-ok: #3FB57E; --step-track: #2B4263;
  --hold-bg: #3A2B0E; --hold-ink: #F4DCA6; --hold-line: #D9A046;
  --top-bg: #071E3A; --top-ink: #FFFFFF; --top-soft: #C3D4EA;
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}