/* 2026-11-14 | owner: maverick | why: tkt158 prototype design tokens, DataLoop control-tower look (steel + container yellow, light mode) | impact: none found (standalone folder) */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --canvas: #f6f7f8;
  --surface: #ffffff;
  --inset: #eff1f3;
  --fg: #1b2227;
  --fg-2: #46525d;
  --fg-3: #5d6a75;
  --line: rgba(27, 34, 39, 0.1);
  --line-strong: rgba(27, 34, 39, 0.2);

  --accent: #f5b941;
  --accent-hover: #e9ab2c;
  --accent-ink: #2a2008;
  --accent-soft: #fdf1d6;
  --steel: #3c4a56;

  --ok: #1d7a45;
  --warn: #8a5a0a;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;
  --info: #25628f;

  --r-sm: 6px;
  --r-md: 8px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-dec: cubic-bezier(0, 0, 0.2, 1);
  --ease-acc: cubic-bezier(0.4, 0, 1, 1);
  --ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-pop: 0 0 0 1px var(--line), 0 8px 24px rgba(27, 34, 39, 0.14);

  /* values that were fixed colors in app.css and js; now tokens so dark mode can change them */
  --on-fg: #ffffff;
  --on-bad: #ffffff;
  --bad-hover: #961f18;
  --ok-soft: #e5f4ec;
  --idle-soft: #eef2f5;
  --tint-1: rgba(27, 34, 39, 0.03);
  --tint-2: rgba(27, 34, 39, 0.045);
  --scrim: rgba(27, 34, 39, 0.4);
  --hover-fade: rgba(255, 255, 255, 0.18);
  --av-s: 28%;
  --av-bg-l: 88%;
  --av-fg-l: 24%;
}

/* 2026-11-14 | owner: maverick | why: tkt158 dark mode and DataLoop logo requested by the owner | impact: all views (colors only), print (forced light by js/app.js), Self-check. No data rule changes. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0f1316;
  --surface: #161b1f;
  --inset: #1d2328;
  --fg: #e6eaed;
  --fg-2: #b2bcc4;
  --fg-3: #93a0aa;
  --line: rgba(230, 234, 237, 0.12);
  --line-strong: rgba(230, 234, 237, 0.26);

  --accent: #f5b941;
  --accent-hover: #ffc95c;
  --accent-ink: #2a2008;
  --accent-soft: #33290f;
  --steel: #8fa1af;

  --ok: #4cc27f;
  --warn: #e0a64a;
  --bad: #f0766d;
  --bad-soft: #3a1815;
  --info: #6bb3e8;

  --shadow-pop: 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, 0.55);

  --on-fg: #121518;
  --on-bad: #1a0b0a;
  --bad-hover: #ff8d85;
  --ok-soft: #12301f;
  --idle-soft: #1d2328;
  --tint-1: rgba(255, 255, 255, 0.03);
  --tint-2: rgba(255, 255, 255, 0.05);
  --scrim: rgba(0, 0, 0, 0.6);
  --hover-fade: rgba(0, 0, 0, 0.12);
  --av-s: 30%;
  --av-bg-l: 28%;
  --av-fg-l: 84%;
}