/* public/css/tokens.css — the shared design tokens (Phase 5, 2026-09-27).
   _version: 2026.09.27.1

   WHY THIS FILE EXISTS
   Nine HTML surfaces each declared their own :root block — index.html (29
   vars), m.html (15), order.html (14), notes.html (13), pp.html (13),
   count.html (11), mobile.html (11), phone.html (8) and worklist.html (none at
   all). Between them the app renders ~250 distinct hex colours. Changing a
   status colour or a shade of grey meant finding it in up to eight places, and
   the surfaces had already drifted apart.

   WHAT IS AND IS NOT SHARED
   Only the genuinely universal scale lives here: greys, status colours, radii
   and shadows. The per-surface ACCENT is deliberately NOT here — the phone
   surfaces are purple on purpose and the desktop is blue; flattening that
   would be a redesign, not a refactor. Each surface keeps its own accent and
   overrides anything it needs.

   HOW IT IS LOADED (important)
   index.html links this file BEFORE its inline <style>. The inline :root comes
   later in the cascade, so wherever a surface already defines a token its own
   value still wins and NOTHING changes visually today. That is intentional:
   this lands the shared vocabulary with zero rendering risk, and a surface is
   de-duplicated later by deleting the local declarations it no longer needs.

   MIGRATING A SURFACE (one at a time, verify before moving on)
     1. <link rel="stylesheet" href="/css/tokens.css"> before the inline style.
     2. Delete local declarations whose value already matches the token here.
     3. Keep the ones that genuinely differ (the accent, usually).
     4. Screenshot before/after at 390 / 768 / 1440 and compare.
*/
:root {
  /* ── Neutral scale — slate; the shared spine of every surface ── */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Secondary/hint text. NOT --gray-400 (#94a3b8 is 2.9:1 on white and fails
     AA); #64748b measures 4.8:1. Fixed under C4 (2026-08-27) — do not lighten. */
  --hint: #64748b;

  /* ── Status colours — the meanings are identical on every surface ──
     The filled greens/oranges were darkened one step on 2026-09-27: the white
     ✓ on the Floor board sat at 2.28:1 against #22c55e, under the 3:1 floor
     for non-text marks and unreadable in shop glare. These measure ~5:1. */
  --ok:        #15803d;
  --ok-light:  #dcfce7;
  --warn:      #c2410c;
  --warn-light:#fef3c7;
  --danger:    #991b1b;
  --danger-light:#fee2e2;
  --info:      #1d4ed8;
  --info-light:#eff6ff;

  /* ── Shape + depth ── */
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);

  /* ── Touch sizing — the shop runs on phones and a wall tablet ──
     36px is the floor that the Floor board already meets (0 of 137 targets
     under it); 44px is the comfortable size the phone surfaces use. */
  --tap-min:     36px;
  --tap-comfort: 44px;
}