/* ════════════════════════════════════════════
   TARA CHAND — COLOUR THEMES
   tarachand.org
   6 themes, all driven by :root CSS variables
════════════════════════════════════════════ */

/* ── 1. CLASSIC (warm gold — default) ──────── */
[data-theme="classic"] {
  --white:     #FFFFFF;
  --off-white: #F8F7F4;
  --stone:     #F0EDE6;
  --border:    #E2DDD6;
  --text:      #1A1916;
  --text-2:    #6B6760;
  --text-3:    #A09C96;
  --accent:    #8B6F47;
  --accent-l:  #C4A882;
  --accent-xl: #EAD9C0;
  --footer-bg: #1A1916;
  --nav-bg:    rgba(255,255,255,0.93);
  --hero-bg:   #FFFFFF;
}

/* ── 2. FOREST (deep green) ─────────────────── */
[data-theme="forest"] {
  --white:     #FFFFFF;
  --off-white: #F4F7F4;
  --stone:     #E8F0E8;
  --border:    #C8D8C8;
  --text:      #141C14;
  --text-2:    #4A5E4A;
  --text-3:    #7A9A7A;
  --accent:    #2D6A3F;
  --accent-l:  #5BA07A;
  --accent-xl: #A8D4B8;
  --footer-bg: #141C14;
  --nav-bg:    rgba(255,255,255,0.93);
  --hero-bg:   #FFFFFF;
}

/* ── 3. OCEAN (deep blue) ───────────────────── */
[data-theme="ocean"] {
  --white:     #FFFFFF;
  --off-white: #F3F6FA;
  --stone:     #E4EDF6;
  --border:    #C2D4E8;
  --text:      #0F1923;
  --text-2:    #3A5068;
  --text-3:    #7090AA;
  --accent:    #1A5276;
  --accent-l:  #4A85AB;
  --accent-xl: #A8C8DC;
  --footer-bg: #0F1923;
  --nav-bg:    rgba(255,255,255,0.93);
  --hero-bg:   #FFFFFF;
}

/* ── 4. SLATE (charcoal + silver) ───────────── */
[data-theme="slate"] {
  --white:     #FFFFFF;
  --off-white: #F5F5F6;
  --stone:     #EAEAEC;
  --border:    #D0D0D4;
  --text:      #18181C;
  --text-2:    #52525A;
  --text-3:    #90909A;
  --accent:    #4A4A72;
  --accent-l:  #7A7AA8;
  --accent-xl: #BCBCD8;
  --footer-bg: #18181C;
  --nav-bg:    rgba(255,255,255,0.93);
  --hero-bg:   #FFFFFF;
}

/* ── 5. ROSE (warm terracotta) ──────────────── */
[data-theme="rose"] {
  --white:     #FFFFFF;
  --off-white: #FBF6F4;
  --stone:     #F5EAE6;
  --border:    #E4CECA;
  --text:      #1E1210;
  --text-2:    #6A3E38;
  --text-3:    #A87870;
  --accent:    #8B3A2A;
  --accent-l:  #C4705A;
  --accent-xl: #E4B0A0;
  --footer-bg: #1E1210;
  --nav-bg:    rgba(255,255,255,0.93);
  --hero-bg:   #FFFFFF;
}

/* ── 6. MIDNIGHT (dark mode) ────────────────── */
[data-theme="midnight"] {
  --white:     #1C1C20;
  --off-white: #242428;
  --stone:     #2C2C32;
  --border:    #3C3C44;
  --text:      #EEEEF0;
  --text-2:    #AAAABC;
  --text-3:    #6A6A7C;
  --accent:    #A090D4;
  --accent-l:  #C4B8E8;
  --accent-xl: #3C3460;
  --footer-bg: #141418;
  --nav-bg:    rgba(28,28,32,0.95);
  --hero-bg:   #1C1C20;
}

/* ── MAP OLD VARIABLE NAMES → NEW ───────────── */
:root {
  --gold:   var(--accent);
  --gold-l: var(--accent-l);
}
[data-theme] {
  --gold:   var(--accent);
  --gold-l: var(--accent-l);
}

/* ── NAV BACKGROUND uses theme var ─────────── */
[data-theme] #site-header { background: var(--nav-bg); }

/* ── HERO uses theme var ────────────────────── */
[data-theme] .hero,
[data-theme] .page-hero { background: var(--hero-bg); }

/* ── FOOTER uses theme var ──────────────────── */
[data-theme] footer { background: var(--footer-bg); }

/* ── MIDNIGHT: invert text inside footer ────── */
[data-theme="midnight"] footer .footer-logo,
[data-theme="midnight"] footer .footer-copy { color: rgba(238,238,240,0.85); }

/* ════════════════════════════════════════════
   THEME SWITCHER WIDGET
════════════════════════════════════════════ */
#theme-switcher {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  padding: 0.6rem 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  transition: background 0.3s, border-color 0.3s;
}
.ts-label {
  font-family: var(--ff-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.ts-swatches { display: flex; gap: 0.4rem; align-items: center; }

.theme-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 2px;
  background: none;
  transition: transform 0.2s, border-color 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.theme-btn:hover { transform: scale(1.15); }
.theme-btn.active { border-color: var(--text); transform: scale(1.1); }
.theme-btn .swatch {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
}

/* Swatch colours */
.theme-btn[data-theme="classic"]  .swatch { background: #8B6F47; }
.theme-btn[data-theme="forest"]   .swatch { background: #2D6A3F; }
.theme-btn[data-theme="ocean"]    .swatch { background: #1A5276; }
.theme-btn[data-theme="slate"]    .swatch { background: #4A4A72; }
.theme-btn[data-theme="rose"]     .swatch { background: #8B3A2A; }
.theme-btn[data-theme="midnight"] .swatch { background: #2C2C32; border: 1px solid #6A6A7C; }

@media(max-width:680px) {
  #theme-switcher { bottom:1rem; right:1rem; padding:0.5rem 0.75rem; }
  .ts-label { display:none; }
}