/* ============================================================
   Group Study Timer — Blog light/dark theming
   Loaded after each page's inline <style>, so these override.
   Dark is the default; [data-theme="light"] flips to light.
   ============================================================ */

/* ── Light theme variable overrides ── */
html[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f8fafc;
  --card: #f1f5f9;
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --border: rgba(15, 23, 42, 0.10);
}

/* ── Light theme: hardcoded-colour fixes ── */
html[data-theme="light"] body { background: #ffffff; color: #0f172a; }
html[data-theme="light"] nav { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(15, 23, 42, 0.08); }
html[data-theme="light"] .logo { color: #0f172a; }
html[data-theme="light"] article p,
html[data-theme="light"] article li,
html[data-theme="light"] article ul,
html[data-theme="light"] article ol { color: #334155; }
html[data-theme="light"] article strong { color: #0f172a; }
html[data-theme="light"] .callout { background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.05)); }
html[data-theme="light"] .callout p { color: #1e293b; }
html[data-theme="light"] .winner { background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(34, 211, 238, 0.06)); }
html[data-theme="light"] tbody td { color: #334155; }
html[data-theme="light"] .faq details p { color: #475569; }
html[data-theme="light"] .card:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10); }
/* Footer intentionally stays dark in both themes for contrast. */

/* ── Theme toggle button (injected into .nav-c by blog-theme.js) ── */
.nav-right { display: flex; align-items: center; gap: 0.6rem; }
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.theme-toggle:hover { color: var(--text-1); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle svg { display: inline-block; }
.theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: inline-block; }