/* GxMed Radar design tokens. Source of truth: docs/DESIGN.md. Link this before app CSS. */

@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Light. Every text colour passes WCAG AA (4.5:1) on --bg and --surface. */
  --bg: #F5F7F6;
  --surface: #FFFFFF;
  --ink: #10201B;        /* names, numbers */
  --ink-2: #46564F;      /* secondary text, column heads */
  --ink-3: #5F6F68;      /* units, dates, source links */
  --line: #D9E1DD;
  --accent: #0A6447;     /* pharmacy green: links, primary button, chart bars, selected */
  --accent-weak: #E2F0EA;/* selected row, active nav */
  --on-accent: #FFFFFF;
  --alert: #B3261E;      /* shortage, money going down */
  --warn: #8A5300;       /* tender closing soon */
  --new: #F9B000;        /* GxMed brand amber: 4 px marker for new rows only, never text */

  --font: "Plex Sans", "Segoe UI Variable Text", "Segoe UI", "Noto Sans", system-ui, sans-serif;
  --mono: "Plex Mono", "Cascadia Mono", Consolas, "Noto Sans Mono", monospace;
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-title: 20px;
  --fs-figure: 32px;
  --lh: 1.43;            /* 14 px text on a 20 px line */

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px;
  --half: 4px;           /* only inside controls (chip padding, icon gap) */
  --row: 40px;
  --row-compact: 32px;
  --radius: 6px;
  --nav-w: 200px;
  --content-max: 1280px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0B1310;
  --surface: #111C18;
  --ink: #E4ECE8;
  --ink-2: #A9B8B1;
  --ink-3: #8C9B94;
  --line: #22312B;
  --accent: #4CC79C;
  --accent-weak: #12322A;
  --on-accent: #0B1310;  /* white on this green fails contrast */
  --alert: #F2857B;
  --warn: #E2A44C;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1310;
    --surface: #111C18;
    --ink: #E4ECE8;
    --ink-2: #A9B8B1;
    --ink-3: #8C9B94;
    --line: #22312B;
    --accent: #4CC79C;
    --accent-weak: #12322A;
    --on-accent: #0B1310;
    --alert: #F2857B;
    --warn: #E2A44C;
    color-scheme: dark;
  }
}

html { background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh) var(--font); }
body { margin: 0; }
/* Plex digits are already one width; tnum keeps the fallback fonts aligned too. */
table, .num, .figure { font-variant-numeric: tabular-nums lining-nums; }
.num { text-align: right; white-space: nowrap; }
.unit, .src { color: var(--ink-3); font-size: var(--fs-caption); }
.code { font-family: var(--mono); font-size: 13px; }