/* Design tokens. The theme is chosen by <html data-theme="light|dark">, set by an inline
   script in app.html before first paint (and kept in sync by js/theme.js). */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --surface-3: #eaeef7;
  --sidebar-bg: #fafbfd;
  --border: #e3e7ef;
  --border-strong: #cdd4e1;
  --text: #1c2333;
  --text-2: #55607a;
  --text-3: #8892a6;
  --accent: #2f6df6;
  --accent-hover: #2358d4;
  --accent-soft: #e7efff;
  --accent-text: #ffffff;
  --danger: #d92d20;
  --danger-soft: #fdecea;
  --success: #15803d;
  --row-bg: #f4f6fb;
  --row-hover: #eaeff9;
  --row-selected: #e1ebff;
  --overlay: rgba(16, 24, 40, 0.45);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-pop: 0 14px 36px rgba(16, 24, 40, 0.18), 0 2px 8px rgba(16, 24, 40, 0.08);
  --focus-ring: 0 0 0 3px rgba(47, 109, 246, 0.35);
  --weekend: rgba(16, 24, 40, 0.035);
  --today: #e11d48;
  --scrollbar: #cdd4e1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12141a;
  --surface: #171a21;
  --surface-2: #1f232c;
  --surface-3: #2a2f3b;
  --sidebar-bg: #14171d;
  --border: #2b303c;
  --border-strong: #3b4252;
  --text: #e8ebf2;
  --text-2: #a5aec2;
  --text-3: #727c91;
  --accent: #5b8cff;
  --accent-hover: #7aa0ff;
  --accent-soft: #1d2a4a;
  --accent-text: #0b1020;
  --danger: #ff6b5f;
  --danger-soft: #3a1c1a;
  --success: #4ade80;
  --row-bg: #1e222b;
  --row-hover: #262b36;
  --row-selected: #23304f;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px rgba(91, 140, 255, 0.45);
  --weekend: rgba(255, 255, 255, 0.03);
  --today: #fb7185;
  --scrollbar: #3b4252;
}

:root {
  --radius: 8px;
  --radius-sm: 6px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w: 264px;
  --row-h: 40px;
  --name-col-w: 340px;
}