/* ════════════════════════════════════════════════════════════════════════
   DGMate — design tokens · "Hazard Placards + navy anchor" (Phase 2.6).
   Cool chart-paper base + crisp near-white surfaces; deep-navy structural frame
   (header / footer / table-header); ONE hi-vis hazard-orange accent. Colour comes
   from the cargo (IMDG class chips in app.js), not the chrome. Light only.
   Fonts: Manrope (display) / Inter (UI) / JetBrains Mono (data).
═══════════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Manrope'; font-style:normal; font-weight:300 800;
  font-display:swap; src:url('fonts/manrope-variable.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('fonts/inter-variable.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('fonts/jetbrains-mono-variable.woff2') format('woff2'); }

:root{
  /* Base — cool pale chart-paper. Warmth/texture live ONLY in the background chart. */
  --bg:        #e9ebee;   /* cool pale chart-paper grey (page ground) */
  --surf:      #fcfdfe;   /* crisp cool near-white — cards & table */
  --surf2:     #f1f4f6;
  --surf3:     #e6eaee;
  --surf4:     #d8dee4;
  --surf5:     #c9d1d9;
  --glass:     rgba(255,255,255,.94);     /* near-white panels */
  --glass-brd: rgba(18,34,54,.10);        /* cool hairline */
  --brd:       rgba(18,34,54,.12);
  --brd2:      rgba(18,34,54,.20);
  --sep:       rgba(18,34,54,.07);
  --txt:       #15212f;   /* cool navy-ink near-black */
  --txt2:      #46535f;
  --txt3:      #76828e;
  --txt4:      #a4adb6;

  /* Navy structural anchor — header bar / footer / table header */
  --navy:      #122438;
  --navy2:     #0d1b2b;
  --navy-txt:  #eef3f9;
  --navy-txt2: #a7b7c8;
  --navy-brd:  rgba(255,255,255,.12);

  /* Accent — ONE hi-vis hazard orange */
  --acc:        #ff6a00;  /* hi-vis orange — fills, active, focus (dark text on it) */
  --acc2:       #e85f00;  /* hover */
  --acc-ink:    #1c1206;  /* near-black text on orange fills */
  --acc-strong: #c2410c;  /* legible orange for text/links/outlines on light */
  --acc-warm:   #b07d1e;  /* amber — caution/warnings only */

  /* Signal flags — true green / amber / red. Red reserved for danger. */
  --s-L:         #1f9d55;
  --danger:      #d62f2f;
  --flag-ok:     #1f9d55;
  --flag-check:  #e6a100;
  --flag-review: #d62f2f;
  --ok-ink:      #157a42;   /* legible flag text on light tints */
  --check-ink:   #8a5e00;
  --review-ink:  #b3231f;

  --r-sm:      6px;
  --r:         10px;
  --r-lg:      14px;
  --r-glass:   18px;
  --ease:       cubic-bezier(.32,.72,0,1);
  --dur-micro:  80ms;
  --dur-short:  180ms;
  --dur-medium: 260ms;
  --sh-xs:     0 1px 2px rgba(18,34,54,.08);
  --sh:        0 1px 2px rgba(18,34,54,.08), 0 6px 18px -6px rgba(18,34,54,.16);
  --sh-md:     0 2px 8px rgba(18,34,54,.10), 0 24px 50px -16px rgba(18,34,54,.30);
  --sh-lg:     0 20px 48px -16px rgba(18,34,54,.34);
  --sh-panel:  0 20px 48px -16px rgba(18,34,54,.28), 0 4px 12px -6px rgba(18,34,54,.14);

  --ff-ui:      'Inter', system-ui, sans-serif;
  --ff-display: 'Manrope', 'Inter', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Background chart (web/bg-chart.png) — cooled + faint, frames content, never under data */
  --chart-opacity: .13;
  --chart-filter:  saturate(.42) sepia(.06) brightness(1.04);
  --chart-tint:    radial-gradient(120% 95% at 50% 28%, rgba(233,235,238,.12) 0%, rgba(233,235,238,.44) 60%, rgba(233,235,238,.70) 100%);

  --fs-micro: 9.5px;
  --fs-label: 11px;
  --fs-body:  12.5px;
  --fs-data:  13px;
  --fs-h3:    15px;
  --fs-h2:    19px;
  --fs-display: 23px;
}

/* Light only — the dark theme was removed in Phase 2.5. */