/* ═════════════════════════════════════════════════════════════
   NMS Label PRO — design tokens (loaded by every page)
   Every colour / size in the app comes from here. Change a value
   once and every screen follows.
   ═════════════════════════════════════════════════════════════ */
:root{
  /* ink + text */
  --ink:#111111;            /* headings, strong values */
  --brand:var(--ink);       /* client's colour (Server setup → Branding): primary buttons, active nav, office band */
  --ink-hover:#242424;
  --text:#374151;           /* body text */
  --muted:#5f6672;          /* secondary text — the lightest text colour (≥4.5:1 on every surface) */
  --subtle:var(--muted);    /* labels, table headers, section titles — hierarchy from size/weight/case, not paler grey */
  --faint:var(--muted);     /* hints */
  --placeholder:#6b7280;    /* input placeholders (4.8:1 on white) */

  /* surfaces + lines */
  --bg:#f8f9fa;             /* page, table header, toolbars */
  --surface:#ffffff;        /* panels, inputs */
  --surface-2:#f5f5f5;      /* chips, avatar, active nav */
  --line:#e5e7eb;
  --line-soft:#f3f4f6;

  /* actions + status */
  --link:#2563eb;            /* 5.2:1 */
  --danger:#dc2626;          /* text/icons, 4.8:1 */
  --danger-ink:#dc2626;
  --ok-bg:#d1fae5;   --ok-line:#a7f3d0;   --ok-ink:#065f46;
  --warn-bg:#fef3c7;                      --warn-ink:#92400e;
  --err-bg:#fee2e2;  --err-line:#fecaca;  --err-ink:#991b1b;
  --err-bg-soft:#fef2f2;
  --info-bg:#e0e7ff; --info-ink:#3730a3;
  --stat-blue:#3b82f6; --stat-amber:#f59e0b; --stat-coral:#ef4444; --stat-teal:#10b981;

  /* label world (the printed label's green) */
  --label:#1a5c45;
  --label-ink:#0a1f18;
  --label-line:#ddeee8;
  --label-bg:#e8f5f0;
  --label-bg-line:#c3e8d8;
  --label-muted:#5b6b64;    /* secondary text on label-green surfaces, 5.1:1+ */

  /* dark scanner */
  --night:#0f1923; --night-2:#0a1420; --night-card:#1a2535;
  --night-ink:#ffffff;
  --night-muted:rgba(255,255,255,0.6);   /* ≥6.4:1 on every night surface */
  --night-line:rgba(255,255,255,0.12);
  --scan:#5DCAA5; --scan-ink:#04342C;

  /* type */
  --font:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --fs-micro:11px;          /* small-caps field labels (floor: 11px) */
  --fs-xs:11px;             /* hints, badges */
  --fs-sm:11px;             /* table headers, meta */
  --fs-md:12px;
  --fs-body:13px;
  --fs-base:14px;

  /* shape + motion */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-pill:9999px;
  --ring:0 0 0 3px rgba(17,17,17,0.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --fast:.12s;
}
::placeholder{color:var(--placeholder);opacity:1}

/* ── Keyboard focus: one visible ring everywhere (≥3:1) ── */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body.scanner :focus-visible,.bar :focus-visible{outline-color:var(--scan)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:var(--r);font:600 var(--fs-base) var(--font);text-decoration:none}
.skip:focus{top:8px}

/* Browser surfaces belong to the system too */
::selection{background:var(--label-bg-line);color:var(--label-ink)}
input,textarea{caret-color:var(--ink)}
body.scanner input{caret-color:var(--scan)}

/* Field-level validation (set by partials/field-errors) */
.field-err{display:block;margin-top:4px;color:var(--err-ink);font-size:var(--fs-md);font-weight:500}
[aria-invalid="true"]{border-color:var(--danger)!important}
.field:has([aria-invalid="true"]){border-color:var(--danger)}