/* themes.css — light (default), dark (prefers-color-scheme or manual), and
   manual override via [data-theme] set by themeService.js. Theme choice is a
   UI preference stored in localStorage only — never sensitive data. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #16232a;
  --border: #dfe4e8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1a22;
    --surface: #142530;
    --text: #eaf2f2;
    --border: #23404a;
    --gray-50: #16232a;
    --gray-100: #1c2e37;
    --gray-200: #23404a;
    --gray-600: #9db3b3;
    --brand-light: #123638;
  }
  :root:not([data-theme="light"]) .badge-demo { background: #3a1f1c; color: #ff8b78; }
}

:root[data-theme="dark"] {
  --bg: #0e1a22;
  --surface: #142530;
  --text: #eaf2f2;
  --border: #23404a;
  --gray-50: #16232a;
  --gray-100: #1c2e37;
  --gray-200: #23404a;
  --gray-600: #9db3b3;
  --brand-light: #123638;
}
:root[data-theme="dark"] .badge-demo { background: #3a1f1c; color: #ff8b78; }

body { background: var(--bg); color: var(--text); }