/* theme.css — shared light/dark mode for account.tmlhub.com.
   Uses the attribute data-mode (NOT data-theme) deliberately — portal.php
   already uses data-theme for its own, unrelated feature (seasonal festive
   palettes: Christmas, CNY, Merdeka, etc., set by admins). Keeping light/dark
   on a separate attribute means the two features can never collide, on any
   page, now or later.
   Pages define their own dark-mode :root defaults (--bg, --surface, --surface2,
   --border, --text, --muted, --glow1, --glow2, --nav-glass, --tab-glass). This
   file only supplies the light-mode override block plus the toggle button, so
   it's safe to include on any page that already follows that variable naming. */
:root {
  color-scheme: dark;
}
:root[data-mode="light"] {
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --surface2: #F0F4FA;
  --border: #DCE4F0;
  --text: #0F172A;
  --muted: #5C6B85;
  --glow1: rgba(37,99,235,.08);
  --glow2: rgba(14,165,233,.06);
  --nav-glass: rgba(255,255,255,.75);
  --tab-glass: rgba(255,255,255,.85);
  color-scheme: light;
}

.theme-toggle {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; border: 1px solid var(--border); background: transparent;
  color: var(--muted); cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent, #2563EB); color: var(--text); }
.theme-toggle .ico-moon { display: block; }
.theme-toggle .ico-sun  { display: none; }
:root[data-mode="light"] .theme-toggle .ico-moon { display: none; }
:root[data-mode="light"] .theme-toggle .ico-sun  { display: block; }