/* ============================================================
   theme.css — Theme toggle + light mode CSS variable overrides
   ============================================================ */

/* ── THEME TOGGLE ────────────────────────────────────── */
.theme-toggle {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--t1);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover {
  background: var(--bg3);
  color: var(--t0);
  border-color: var(--border2);
}

/* ── LIGHT MODE ──────────────────────────────────────── */
html.light,
body.light {
  --bg0: #f5f6fa;
  --bg1: #ffffff;
  --bg2: #eef0f6;
  --bg3: #e4e7f0;
  --bgE: #f0f1f8;
  --border: #dde0ec;
  --border2: #c8ccde;
  --pb: rgba(180,185,215,0.5);
  --t0: #111827;
  --t1: #374151;
  --t2: #6b7280;
  --t3: #9ca3af;
  --acc: #4f5ef7;
  --acc2: #6674ff;
  --acc-soft: rgba(102,116,255,0.10);
  --amber: #d97706;
  --amber2: #f59e0b;
  --green: #059669;
  --green-soft: rgba(5,150,105,0.10);
  --red: #dc2626;
  --pink: #be185d;
}
body.light .bg-deco .grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
}
body.light .orb-a { background: radial-gradient(closest-side, rgba(102,116,255,0.3), transparent); opacity:0.5; }
body.light .orb-b { background: radial-gradient(closest-side, rgba(155,91,255,0.2), transparent); opacity:0.3; }
body.light .orb-c { background: radial-gradient(closest-side, rgba(34,168,120,0.18), transparent); opacity:0.25; }
body.light nav {
  background: rgba(255,255,255,0.85);
  border-color: var(--border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
body.light .shot {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 20px 40px -10px rgba(0,0,0,0.08),
    0 8px 20px -8px rgba(102, 116, 255, 0.06);
}
body.light .search-input {
  background: #f9fafc;
  border-color: var(--border2);
  color: var(--t1);
}
body.light .search-input::placeholder { color: var(--t3); }
body.light code { background: var(--bg3); color: var(--acc); }
body.light .price-card { background: var(--bg1); }
body.light .price-card.featured { background: linear-gradient(160deg, #f0f2ff 0%, #f9f8ff 100%); }
body.light .feat { background: var(--bg1); }
body.light .priv-card { background: var(--bg1); }
body.light .faq-item { border-color: var(--border); }
body.light .footer { background: #eef0f8; border-color: var(--border); }