/* FREIGHT brand styles — from the FRHT merit report (Delta Ops, 2026-11-05).
   Fonts are self-hosted in ./fonts (SIL OFL — licence files alongside). */
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap; src: url("fonts/ChakraPetch-400.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url("fonts/ChakraPetch-500.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("fonts/ChakraPetch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("fonts/ChakraPetch-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); }

:root {
  --navy-deep: #111b30;   /* page background */
  --navy:      #1b2a47;   /* panels; top of the gradient */
  --navy-hi:   #263a5e;   /* raised / hover */
  --gold:       #e3d29c;  /* headings, big numbers, rules */
  --gold-dim:   #a8996b;  /* labels, frame border */
  --gold-faint: rgba(227, 210, 156, .14);  /* inner frame, hairlines */
  --kaine:     #3fe08f;   /* Nakato Kaine accent */
  --kaine-dim: rgba(63, 224, 143, .35);
  --text:  #ece4c8;
  --muted: #8f9bb3;
  --down:  #e8836b;       /* negatives / warnings */
  --font-display: "Chakra Petch", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

html, body { background: var(--navy-deep); }
body { color: var(--text); font: 500 18px/1.45 var(--font-display); -webkit-font-smoothing: antialiased; }
.mono, .num { font-family: var(--font-mono); }

/* Signature treatments */
.panel  { position: relative; background: linear-gradient(var(--navy), var(--navy-deep)); }
.frame  { position: absolute; inset: 22px; border: 1.5px solid var(--gold-dim); pointer-events: none; }
.frame.inner { inset: 28px; border: 1px solid var(--gold-faint); }
.eyebrow { font-weight: 600; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim); }
h1 { font-weight: 700; font-size: 50px; line-height: 1.05; letter-spacing: .06em; color: var(--gold); }
h2 { font-weight: 700; font-size: 20px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.stat { font: 500 82px/1 var(--font-mono); color: var(--gold); letter-spacing: -.02em; }
.rule { border: 0; border-bottom: 2px solid var(--gold); }
.badge { border-radius: 50%; box-shadow: 0 0 0 3px var(--gold-dim); }