/*
  Peakbeat design tokens, the source of truth for the web app. Screens: wall-tv.html (unattended TV wall),
  care-queue.html, settings-console.html (shell plus Cause rules), report-builder.html, email-holiday-report.html (inline only).
  1. Commerce Explorer palette, dark first; light follows the OS unless data-theme is set on <html>.
  2. Three causes: customer or bank (calm, never alarming), fraud policy (purple), system (cinnabar, the only urgent cause besides silence).
  3. Dots: placed white (ringed in light), recovered yellow, not recovered red, retry window open grey dashed.
  4. Status is Green, Amber or Red, always with a reason in words; colour is never the only cue.
  5. Sites are shown as code, domain and currency together; money is never summed across currencies.
  6. TV mode scales from one root size (--tv-root), shows order numbers only, and never relies on hover.
  7. Every screen has loading, empty, stale and error states; stale data dims values and says how old they are.
  8. Numbers use JetBrains Mono with tabular figures; text uses Host Grotesk; copy is sentence case.
  9. Sample data in prototypes is fictional (example.com retailer) and marked on screen.
*/
:root{
  --bg:#0e1311; --bg-alt:#161d1a; --surface:#161d1a; --surface-2:#1c2521; --row-hover:#1f2925;
  --text:#e8ece8; --muted:#9daba4; --border:#2b3530; --border-strong:#46534c;
  --accent:#1a6e51; --accent-hover:#21825f; --on-accent:#e8ece8; --accent-bg:#13271f;
  --mark:#4fc393; --link:#4fc393; --focus:#7ad6ae;
  --good:#4fc393; --good-bg:#13271f;
  --warning:#f0b53d; --warning-bg:#2a2414;
  --error:#ff7593; --error-bg:#2a1a1f;

  --status-green:var(--good); --status-amber:var(--warning); --status-red:var(--error); --status-unknown:var(--muted);

  --cause-customer:#9fb6d6; --cause-customer-bg:#1a222c;
  --cause-fraud:#b49cff;    --cause-fraud-bg:#221d33;
  --cause-system:#ff8157;   --cause-system-bg:#2d1d16;
  --cause-unknown:var(--muted);

  --dot-placed:#e8ece8; --dot-ring:transparent;
  --dot-recovered:#f0b53d; --dot-lost:#ff7593; --dot-pending:#9daba4;

  --chart-today:var(--text); --chart-fill:rgba(79,195,147,.14); --chart-last-year:var(--mark); --chart-normal:var(--border-strong);

  --font:'Host Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem; --fs-lg:1.25rem;
  --fs-xl:1.625rem; --fs-2xl:2.25rem; --fs-3xl:3.25rem;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --lh-tight:1.15; --lh-base:1.5;
  --tracking-label:.08em;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --radius-sm:6px; --radius:10px; --radius-lg:12px; --radius-pill:999px;
  --gutter:16px;
  --tv-root:clamp(14px,.95vw,26px);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f4f5f1; --bg-alt:#f4f5f1; --surface:#ffffff; --surface-2:#f7f8f5; --row-hover:#eef3ef;
  --text:#1b2320; --muted:#56625c; --border:#dde3dd; --border-strong:#b9c3bc;
  --accent:#0b5c45; --accent-hover:#084a37; --on-accent:#ffffff; --accent-bg:#e3efe9;
  --mark:#0b5c45; --link:#0b5c45; --focus:#0b5c45;
  --good:#0b7a55; --good-bg:#e3efe9;
  --warning:#8a5300; --warning-bg:#fdf4e2;
  --error:#b01e44; --error-bg:#fbeef1;
  --cause-customer:#40597d; --cause-customer-bg:#eaf0f7;
  --cause-fraud:#6b4fc9; --cause-fraud-bg:#f0ecfb;
  --cause-system:#c2410c; --cause-system-bg:#fdeee6;
  --dot-placed:#ffffff; --dot-ring:#b9c3bc;
  --dot-recovered:#e0a526; --dot-lost:#b01e44; --dot-pending:#56625c;
  --chart-fill:rgba(11,92,69,.10);
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:#f4f5f1; --bg-alt:#f4f5f1; --surface:#ffffff; --surface-2:#f7f8f5; --row-hover:#eef3ef;
  --text:#1b2320; --muted:#56625c; --border:#dde3dd; --border-strong:#b9c3bc;
  --accent:#0b5c45; --accent-hover:#084a37; --on-accent:#ffffff; --accent-bg:#e3efe9;
  --mark:#0b5c45; --link:#0b5c45; --focus:#0b5c45;
  --good:#0b7a55; --good-bg:#e3efe9;
  --warning:#8a5300; --warning-bg:#fdf4e2;
  --error:#b01e44; --error-bg:#fbeef1;
  --cause-customer:#40597d; --cause-customer-bg:#eaf0f7;
  --cause-fraud:#6b4fc9; --cause-fraud-bg:#f0ecfb;
  --cause-system:#c2410c; --cause-system-bg:#fdeee6;
  --dot-placed:#ffffff; --dot-ring:#b9c3bc;
  --dot-recovered:#e0a526; --dot-lost:#b01e44; --dot-pending:#56625c;
  --chart-fill:rgba(11,92,69,.10);
  color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:var(--fw-regular) var(--fs-base)/var(--lh-base) var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;box-sizing:border-box}
.dot.placed{background:var(--dot-placed);box-shadow:inset 0 0 0 1px var(--dot-ring)}
.dot.recovered{background:var(--dot-recovered)}
.dot.lost{background:var(--dot-lost)}
.dot.pending{border:1.5px dashed var(--dot-pending)}

.cause{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.cause.customer{color:var(--cause-customer);background:var(--cause-customer-bg)}
.cause.fraud{color:var(--cause-fraud);background:var(--cause-fraud-bg)}
.cause.system{color:var(--cause-system);background:var(--cause-system-bg)}
.cause.unknown{color:var(--muted);border:1px dashed var(--border-strong)}

.sample-flag{font-size:var(--fs-xs);color:var(--warning);background:var(--warning-bg);border-radius:var(--radius-sm);padding:2px 8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}