/* ============================================================
   KỸ NĂNG SỐNG — Themes (Dark / Light CSS Variables)
   Already defined in main.css :root — this file
   handles additional theme-specific overrides and enhancements.
   ============================================================ */

/* ─── Data URI theme glow on active elements ─────────────── */
[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 8px 28px rgba(124,77,255,0.5), 0 0 0 1px rgba(124,77,255,0.2);
}

[data-theme="dark"] .lesson-card:hover {
  box-shadow: 0 8px 32px rgba(124,77,255,0.15), 0 2px 8px rgba(0,0,0,0.4);
}

[data-theme="dark"] .map-node.unlocked .map-node-inner {
  box-shadow: 0 0 20px rgba(124,77,255,0.4), 0 0 40px rgba(124,77,255,0.15);
}

[data-theme="dark"] .price-card.featured {
  box-shadow: 0 0 40px rgba(255,215,64,0.1), 0 8px 32px rgba(0,0,0,0.4);
}

[data-theme="dark"] .navbar {
  border-bottom-color: rgba(35,41,70,0.8);
}

/* ─── Light Theme overrides ──────────────────────────────── */
[data-theme="light"] {
  --bg-main: #f3f0ff;
  --bg-card: #ffffff;
  --bg-card2: #f5f3ff;
  --bg-input: #ede7f6;
  --bg-nav: rgba(255,255,255,0.96);
  --bg-modal: rgba(0,0,0,0.45);
  --c-text: #1a1a2e;
  --c-text2: #44475a;
  --c-muted: #9e9e9e;
  --c-border: #e0d6f2;
  --c-border2: #d1c4e9;
  --shadow: 0 8px 32px rgba(124,77,255,0.10);
  --shadow-sm: 0 2px 10px rgba(124,77,255,0.08);
}

[data-theme="light"] .navbar,
[data-theme="light"] .bottom-nav {
  box-shadow: 0 2px 12px rgba(124,77,255,0.06);
}

[data-theme="light"] .hero {
  background: linear-gradient(180deg, #1a0e3d 0%, #0d0f1a 100%);
}

[data-theme="light"] .lesson-card {
  background: #fff;
  border-color: #e0d6f2;
}

[data-theme="light"] .lesson-card:hover {
  box-shadow: 0 8px 28px rgba(124,77,255,0.12);
}

[data-theme="light"] .lb-item {
  background: #fff;
  border-color: #e0d6f2;
}

[data-theme="light"] .lb-item.is-me {
  background: rgba(255,215,64,0.05);
}

[data-theme="light"] .auth-box,
[data-theme="light"] .modal-box,
[data-theme="light"] .settings-panel {
  background: #fff;
}

[data-theme="light"] .toast {
  background: #fff;
  border-color: #e0d6f2;
  color: #1a1a2e;
}

[data-theme="light"] .filter-chip {
  background: #f5f3ff;
  border-color: #e0d6f2;
  color: #44475a;
}

[data-theme="light"] .filter-chip:hover,
[data-theme="light"] .filter-chip.active {
  background: rgba(124,77,255,0.1);
  color: var(--c-primary);
}

[data-theme="light"] .group-card {
  background: #fff;
}

[data-theme="light"] .price-card {
  background: #fff;
}

[data-theme="light"] .price-card.featured {
  background: linear-gradient(135deg, #fff, rgba(255,215,64,0.06));
}

[data-theme="light"] .view-btns button {
  background: #f5f3ff;
  border-color: #e0d6f2;
  color: #44475a;
}

[data-theme="light"] .input-group input {
  background: #f5f3ff;
  color: #1a1a2e;
  border-color: #d1c4e9;
}

[data-theme="light"] .comment-input-row input {
  background: #f5f3ff;
  color: #1a1a2e;
}

[data-theme="light"] .settings-account {
  background: #f5f3ff;
}

[data-theme="light"] .empty-state {
  color: #9e9e9e;
}

/* ─── Theme transition ───────────────────────────────────── */
body,
.navbar,
.bottom-nav,
.screen,
.lesson-card,
.lb-item,
.filter-chip,
.group-card,
.price-card,
.auth-box,
.modal-box,
.settings-panel,
.toast {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}