/* ============================================================
   THEME — CSS variables for light/dark mode
   Toggled via document.documentElement.dataset.theme = 'dark'|'light'
   ============================================================ */

:root[data-theme="dark"] {
  --bg-canvas: #0e1014;
  --bg-panel: #15181f;
  --bg-panel-hover: #1c2029;
  --bg-toolbar: #11141a;
  --border-subtle: #232831;
  --border-strong: #2e343f;
  --text-primary: #e8ebf1;
  --text-secondary: #8b919e;
  --text-tertiary: #5b6270;
  --accent: #4a9eff;
  --accent-soft: rgba(74, 158, 255, 0.15);
  --accent-glow: rgba(74, 158, 255, 0.4);
  --danger: #ff5a5a;
  --danger-soft: rgba(255, 90, 90, 0.15);
  --grid-color-1: #1f242d;
  --grid-color-2: #181c24;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] {
  --bg-canvas: #f5f6f8;
  --bg-panel: #ffffff;
  --bg-panel-hover: #f0f2f5;
  --bg-toolbar: #fafbfc;
  --border-subtle: #e4e7ec;
  --border-strong: #d0d5dc;
  --text-primary: #1a1d23;
  --text-secondary: #5b6270;
  --text-tertiary: #8b919e;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --accent-glow: rgba(37, 99, 235, 0.25);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --grid-color-1: #e0e3e8;
  --grid-color-2: #ebedf0;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.05);
}