/* ── Theme tokens (light + dark) ───────────────────────────────────────────
   Single source of truth for color. Everything else in the app should read
   these custom properties — never hardcode a hex/rgba color in a component.
   Light is the default (first-time users); dark is opt-in via [data-theme="dark"].
*/

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface2: #eef0f4;
  --border: #dde1e8;
  --border2: #c7cedb;

  --text: #12151c;
  --muted: #475569;
  --muted2: #64748b;
  --placeholder: #94a3b8;

  /* Brand orange — reserved for primary tappable actions only */
  --accent: #c2410c;
  --accent-rgb: 194,65,12;
  --accent2: #9a3412;
  --accent-strong: #c2410c;
  --accent-strong-rgb: 194,65,12;
  --accent-strong-hover: #9a3412;

  --green: #15803d;       --green-rgb: 21,128,61;    --on-green: #ffffff;
  --red: #b91c1c;         --red-rgb: 185,28,28;
  --blue: #1d4ed8;        --blue-rgb: 29,78,216;
  --yellow: #a16207;      --yellow-rgb: 161,98,7;    --on-yellow: #ffffff;
  --cyan: #0e7490;        --cyan-rgb: 14,116,144;
  --purple: #7e22ce;      --purple-rgb: 126,34,206;
  --magenta: #a21caf;     --magenta-rgb: 162,28,175;
  --indigo: #4338ca;      --indigo-rgb: 67,56,202;
  --slate: #475569;       --slate-rgb: 71,85,105;
  --gray: #64748b;        --gray-rgb: 100,116,139;

  --focus-ring: #1d4ed8;
  --shadow: rgba(15,23,42,0.12);
  --shadow-rgb: 15,23,42;

  --radius: 10px;
  --radius-lg: 16px;
  --font: 'DM Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f1117;
  --surface: #181c25;
  --surface2: #1e2332;
  --border: #2a3045;
  --border2: #3a4460;

  --text: #f1f5f9;
  --muted: #8896b0;
  --muted2: #5a6a88;
  --placeholder: #5a6a88;

  --accent: #f97316;
  --accent-rgb: 249,115,22;
  --accent2: #fb923c;
  --accent-strong: #c2410c;
  --accent-strong-rgb: 194,65,12;
  --accent-strong-hover: #9a3412;

  --green: #22c55e;       --green-rgb: 34,197,94;    --on-green: #062910;
  --red: #ef4444;         --red-rgb: 239,68,68;
  --blue: #3b82f6;        --blue-rgb: 59,130,246;
  --yellow: #eab308;      --yellow-rgb: 234,179,8;    --on-yellow: #241c00;
  --cyan: #06b6d4;        --cyan-rgb: 6,182,212;
  --purple: #a855f7;      --purple-rgb: 168,85,247;
  --magenta: #c026d3;     --magenta-rgb: 192,38,211;
  --indigo: #6366f1;      --indigo-rgb: 99,102,241;
  --slate: #94a3b8;       --slate-rgb: 148,163,184;
  --gray: #8896b0;        --gray-rgb: 136,150,176;

  --focus-ring: #60a5fa;
  --shadow: rgba(0,0,0,0.5);
  --shadow-rgb: 0,0,0;
}

/* Visible keyboard focus everywhere, in both themes */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Theme toggle switch */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text);
  cursor: pointer; font-size: 16px; line-height: 1;
  touch-action: manipulation; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--border); }