/* =========================
   DEFAULT / LIGHT THEME
========================= */

:root {
  --bg-color: #ffffff;
  --text-color: #222222;

  --primary-color: #6c63ff;
  --secondary-color: #8b5cf6;

  --card-bg: #ffffff;
  --navbar-bg: rgba(255, 255, 255, 0.9);

  --border-color: #e5e7eb;

  --shadow-color: rgba(0, 0, 0, 0.08);

  --hover-color: #574bff;
}

/* =========================
   DARK PURPLE THEME
========================= */

[data-theme="dark"] {
  --bg-color: #0f0718;
  --text-color: #f3f4f6;

  --primary-color: #a855f7;
  --secondary-color: #c084fc;

  --card-bg: #1a1028;
  --navbar-bg: rgba(15, 7, 24, 0.95);

  --border-color: #2e1b46;

  --shadow-color: rgba(168, 85, 247, 0.25);

  --hover-color: #d8b4fe;
}

/* =========================
   BLIND COLOR MODE
   (Color Blind Friendly)
========================= */

[data-theme="blind"] {
  --bg-color: #f8f9fa;
  --text-color: #1f2937;

  --primary-color: #005f73;
  --secondary-color: #0a9396;

  --card-bg: #ffffff;
  --navbar-bg: rgba(248, 249, 250, 0.95);

  --border-color: #cbd5e1;

  --shadow-color: rgba(0, 95, 115, 0.12);

  --hover-color: #0a9396;
}

.theme-switcher {
  display: flex;
  gap: 10px;
  align-items: center;
}

.theme-btn {
  width: 45px;
  height: 45px;

  border: none;
  border-radius: 50%;

  cursor: pointer;

  font-size: 18px;

  background: var(--card-bg);
  color: var(--text-color);

  box-shadow: 0 5px 15px var(--shadow-color);

  transition: all 0.3s ease;
}

.theme-btn:hover {
  transform: translateY(-3px) scale(1.05);

  background: var(--primary-color);
  color: white;
}

/* Glow khusus dark mode */

[data-theme="dark"] .theme-btn:hover {
  box-shadow:
    0 0 10px #a855f7,
    0 0 20px #9333ea,
    0 0 40px #7e22ce;
}