/* Shared tokens. The board is read from 20+ feet, so contrast and weight are
   tuned for distance, not for a desk monitor. */
:root {
  --bg:        #0b0f16;
  --surface:   #151b26;
  --surface-2: #1e2633;
  --line:      #2c3648;
  --text:      #f2f5fa;
  --text-dim:  #9aa7bd;

  /* Status colors are always paired with a written label — never color alone. */
  --st-waiting:          #94a3b8;
  --st-assigned:         #60a5fa;
  --st-in_progress:      #4ade80;
  --st-waiting_parts:    #fbbf24;
  --st-waiting_approval: #c084fc;
  --st-done:             #22d3ee;
  --st-picked_up:        #64748b;

  /* Brand accent, set per shop from the console. Deliberately separate from
     the status colors: those carry meaning and must not be re-themed. */
  --brand: #60a5fa;

  --overdue:  #f87171;
  --due-soon: #fbbf24;

  --radius: 14px;
  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Any component rule that sets `display` (grid, flex…) silently defeats the
   `hidden` attribute, because the browser's own [hidden] rule is weaker. This
   makes `hidden` mean hidden everywhere. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.status-waiting          { --status: var(--st-waiting); }
.status-assigned         { --status: var(--st-assigned); }
.status-in_progress      { --status: var(--st-in_progress); }
.status-waiting_parts    { --status: var(--st-waiting_parts); }
.status-waiting_approval { --status: var(--st-waiting_approval); }
.status-done             { --status: var(--st-done); }
.status-picked_up        { --status: var(--st-picked_up); }