/* ==========================================================================
   THEME SYSTEMS - KOPI SHUANG HOR
   Theme 1: Luxury Dark Espresso (Default)
   Theme 2: Royal Gold & Cream (Elegant Light)
   Theme 3: Modern Emerald & Botanical (Herbal Green)
   ========================================================================== */

/* ===== THEME 1: LUXURY DARK ESPRESSO (DEFAULT) ===== */
[data-theme="dark-espresso"] {
  --bg: #0a0705;
  --bg-alt: #110d09;
  --bg-card: #161110;
  --bg-card-hover: #1d1614;

  --gold: #c9a84c;
  --gold-light: #e8d48b;
  --gold-dark: #8b6914;
  --accent: #d97706;

  --white: #faf5ef;
  --gray-100: #e8ddd3;
  --gray-300: #a89888;
  --gray-500: #736557;
  --gray-700: #3d322a;

  --border: rgba(201, 168, 76, 0.12);
  --border-hover: rgba(201, 168, 76, 0.35);
  --topbar-bg: rgba(10, 7, 5, 0.6);
  --topbar-bg-scrolled: rgba(10, 7, 5, 0.95);
  --modal-bg: #ffffff;
  --modal-text: #1f1f1f;
}

/* ===== THEME 2: ROYAL GOLD & CREAM (ELEGANT LIGHT) ===== */
[data-theme="royal-cream"] {
  --bg: #faf7f2;
  --bg-alt: #f3ede2;
  --bg-card: #ffffff;
  --bg-card-hover: #fcf9f5;

  --gold: #9e7a2b;
  --gold-light: #b89343;
  --gold-dark: #6e5215;
  --accent: #b45309;

  --white: #2b1f17;
  --gray-100: #4a382c;
  --gray-300: #665243;
  --gray-500: #8c7665;
  --gray-700: #d6cbbe;

  --border: rgba(158, 122, 43, 0.18);
  --border-hover: rgba(158, 122, 43, 0.45);
  --topbar-bg: rgba(250, 247, 242, 0.75);
  --topbar-bg-scrolled: rgba(250, 247, 242, 0.98);
  --modal-bg: #ffffff;
  --modal-text: #1f1f1f;
}

/* ===== THEME 3: EMERALD BOTANICAL (HERBAL HEALTH) ===== */
[data-theme="emerald-herbal"] {
  --bg: #061410;
  --bg-alt: #0a1c17;
  --bg-card: #0e241e;
  --bg-card-hover: #143029;

  --gold: #2ecc71;
  --gold-light: #61e89f;
  --gold-dark: #1b8a4a;
  --accent: #f39c12;

  --white: #f0fdf4;
  --gray-100: #dcfce7;
  --gray-300: #86efac;
  --gray-500: #4ade80;
  --gray-700: #14532d;

  --border: rgba(46, 204, 113, 0.15);
  --border-hover: rgba(46, 204, 113, 0.4);
  --topbar-bg: rgba(6, 20, 16, 0.65);
  --topbar-bg-scrolled: rgba(6, 20, 16, 0.96);
  --modal-bg: #ffffff;
  --modal-text: #1f1f1f;
}

[data-theme="royal-cream"] .logo-img {
  filter: drop-shadow(0 2px 6px rgba(158, 122, 43, 0.4));
}

[data-theme="emerald-herbal"] .logo-img {
  filter: drop-shadow(0 2px 6px rgba(46, 204, 113, 0.4));
}


/* Floating Theme Switcher Widget */

.theme-switcher {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 95;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-full);
  padding: 4px;
  display: flex;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.theme-btn:hover {
  transform: scale(1.15);
}

.theme-btn.active {
  border-color: var(--white);
  transform: scale(1.1);
}

.theme-btn-espresso { background: linear-gradient(135deg, #0a0705, #c9a84c); }
.theme-btn-cream { background: linear-gradient(135deg, #faf7f2, #9e7a2b); }
.theme-btn-emerald { background: linear-gradient(135deg, #061410, #2ecc71); }