/* Dark theme — <html data-theme="dark"> (or any subtree). Every token from
   colors.css that changes meaning in the dark is re-pointed here; components
   never branch on the theme. Set the attribute pre-paint via tokens/theme.js. */
[data-theme="dark"] {
  color-scheme: dark;

  /* Brand — fills keep #3580BB; text/links use the lighter blue */
  --primary-lt: rgba(72,175,255,0.14);
  --on-primary: #ffffff;

  /* Sidebar sinks one step below the page so it stays the darkest plane */
  --sidebar-bg: #0b111b;
  --sidebar-hover: rgba(255,255,255,0.05);
  --sidebar-active: rgba(72,175,255,0.14);
  --sidebar-border: rgba(255,255,255,0.06);

  /* Surfaces — page < card < elevated */
  --body-bg: #0f1623;
  --bg-surface: #1a2332;
  --bg-surface-secondary: #141d2b;
  --bg-elevated: #212c3d;
  --bg-inverse: #e6ebf2;
  --text-inverse: #0f1623;

  /* Borders */
  --border-color: rgba(255,255,255,0.08);
  --border-color-light: rgba(255,255,255,0.05);
  --border-translucent: rgba(255,255,255,0.08);

  /* Text */
  --text: #e6ebf2;
  --text-secondary: #b3bccb;
  --text-muted: #8a93a3;
  --text-disabled: #5a6473;

  /* Interaction */
  --link: #6fb6f0;
  --link-hover: #9ccdf5;
  --focus-ring: #48AFFF;
  --toggle-off: rgba(255,255,255,0.18);
  --scrim: rgba(3,7,15,0.65);
  --shadow: rgba(0,0,0,0.4) 0 2px 4px 0;
  --shadow-card: 0 0 0 1px var(--border-translucent), rgba(0,0,0,0.3) 0 2px 4px 0;
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-modal: 0 24px 48px rgba(0,0,0,0.6);
  --scrollbar: rgba(255,255,255,0.12);

  /* Status text — lifted for contrast on navy */
  --success-text: #5ad672;
  --warning-text: #ffc04d;
  --danger-text: #ff7a7a;
  --info-text: #6fb6f0;

  /* Tints */
  --green-lt: rgba(47,179,68,0.16);
  --red-lt: rgba(214,57,57,0.16);
  --yellow-lt: rgba(245,159,0,0.16);
  --blue-lt: rgba(6,111,209,0.18);
  --azure-lt: rgba(66,153,225,0.16);
  --purple-lt: rgba(174,62,201,0.16);
  --cyan-lt: rgba(23,162,184,0.16);
}