/* Roscoe 8 — design tokens. Light default; dark = Sublime-inspired warm gray.
   Every component uses these vars so both themes work for free. Never hard-code a hex. */
:root,
:root[data-theme='light'] {
  color-scheme: light;
  --bg-0: #f5f7fb;  --bg-1: #ffffff;  --bg-2: #eef1f7;  --bg-3: #e3e8f1;   /* surfaces, back→front */
  --fg-0: #0f172a;  --fg-1: #1e293b;  --fg-2: #475569;  --fg-3: #94a3b8;   /* text, strong→faint */
  --border-1: #d8dde6;  --border-2: #c1c8d4;
  --accent: #4f7cff;  --accent-fg: #ffffff;  --accent-soft: #e8eeff;       /* brand blue */
  --good: #16a34a;  --good-soft: #dcfce7;
  --warn: #d97706;  --warn-soft: #fef3c7;
  --bad:  #dc2626;  --bad-soft:  #fee2e2;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.06);
  --shadow-2: 0 4px 12px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.10);
  --header-h: 56px;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg-0: #1e1e1e;  --bg-1: #252526;  --bg-2: #2d2d2d;  --bg-3: #3c3c3c;
  --fg-0: #d4d4d4;  --fg-1: #cccccc;  --fg-2: #858585;  --fg-3: #5a5a5a;
  --border-1: #3c3c3c;  --border-2: #4a4a4a;
  --accent: #6c8bff;  --accent-fg: #1e1e1e;  --accent-soft: #2a2d3a;
  --good: #4ade80;  --good-soft: #14532d;
  --warn: #fbbf24;  --warn-soft: #422006;
  --bad:  #f87171;  --bad-soft:  #450a0a;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.5);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg-0); color: var(--fg-0);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; line-height: 1.45;
  transition: background-color .3s ease, color .3s ease;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

[hidden] { display: none !important; }