/* =============================================================
   THEME  —  light (default) + dark scaffolding
   -------------------------------------------------------------
   Tokens in variables.css are the light theme. Dark mode simply
   re-maps the same token names, so no component CSS changes.
   Activate later with: <html data-theme="dark"> (JS toggle).
   Left intentionally minimal for this stage — the future
   Dark Mode goal is already wired, not yet exposed in the UI.
   ============================================================= */

:root[data-theme="dark"] {
  --background: #12151c;
  --surface: #1b1f29;
  --surface-2: #232834;
  --surface-hover: #2a3242;

  --text-primary: #e9ecf1;
  --text-secondary: #a7b0be;
  --text-muted: #7a8494;
  --text-on-dark: #e9ecf1;

  --border-color: #2b3140;
  --border-strong: #3a4152;

  /* neutral (secondary) card headers — slate band that reads above --surface */
  --header-neutral-bg: #2a333f;
  --header-neutral-bg-2: #222933;

  --primary-soft: rgba(0, 123, 255, 0.18);
  --surface-hover: #223049;

  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-large: 0 12px 32px rgba(0, 0, 0, 0.55);

  --scrollbar-thumb: #3a4152;
  --scrollbar-thumb-hover: #4c5468;
}