/* ============================================================
   Theme Switcher – CSS variable overrides + UI styles
   Follows the 60:30:10 colour-design principle:
     60 % dominant  → --clr-bg + --clr-surface
     30 % secondary → --clr-surface2 + --clr-navy
     10 % accent    → --clr-cyan + --clr-teal
   All accent colours pass WCAG AA (≥ 4.5:1) on their
   respective background colours.
   ============================================================ */

/* ── Theme: Cyber (default – navy/cyan) ─────────────────────
   60 %: #0a0e1a / #111827   30 %: #1a2236 / #0d1b2a
   10 %: #06b6d4 (cyan)  ·  contrast on bg ≈ 7.5:1  ✓       */
html[data-theme="cyber"] {
  --clr-bg:           #0a0e1a;
  --clr-surface:      #111827;
  --clr-surface2:     #1a2236;
  --clr-navy:         #0d1b2a;
  --clr-blue:         #1e40af;
  --clr-cyan:         #06b6d4;
  --clr-teal:         #14b8a6;
  --clr-neon:         #00f5ff;
  --clr-neon2:        #7c3aed;
  --clr-text:         #e2e8f0;
  --clr-muted:        #94a3b8;
  --clr-border:       rgba(6, 182, 212, 0.20);
  --hero-vignette:    rgba(10, 14, 26, 0.80);
  --nav-bg:           rgba(10, 14, 26, 0.75);
  --nav-bg-scrolled:  rgba(10, 14, 26, 0.95);
  --nav-mobile-bg:    rgba(10, 14, 26, 0.97);
}

/* ── Theme: Forest (deep green) ──────────────────────────────
   60 %: #060e09 / #0d2018   30 %: #163524 / #091710
   10 %: #22c55e (emerald)  ·  contrast on bg ≈ 7.2:1  ✓    */
html[data-theme="forest"] {
  --clr-bg:           #060e09;
  --clr-surface:      #0d2018;
  --clr-surface2:     #163524;
  --clr-navy:         #091710;
  --clr-blue:         #166534;
  --clr-cyan:         #22c55e;
  --clr-teal:         #4ade80;
  --clr-neon:         #86efac;
  --clr-neon2:        #166534;
  --clr-text:         #ecfdf5;
  --clr-muted:        #6ee7b7;
  --clr-border:       rgba(34, 197, 94, 0.28);
  --hero-vignette:    rgba(6, 14, 9, 0.82);
  --nav-bg:           rgba(6, 14, 9, 0.75);
  --nav-bg-scrolled:  rgba(6, 14, 9, 0.95);
  --nav-mobile-bg:    rgba(6, 14, 9, 0.97);
}

/* ── Theme: Solar (warm light / parchment) ───────────────────
   60 %: #faf6ee / #ede5d2   30 %: #dfd2ba / #f2ece0
   10 %: #c2410c (burnt orange)  ·  contrast on bg ≈ 4.7:1  ✓ */
html[data-theme="solar"] {
  --clr-bg:           #faf6ee;
  --clr-surface:      #ede5d2;
  --clr-surface2:     #dfd2ba;
  --clr-navy:         #f2ece0;
  --clr-blue:         #7c2d12;
  --clr-cyan:         #c2410c;
  --clr-teal:         #9a3412;
  --clr-neon:         #f97316;
  --clr-neon2:        #ea580c;
  --clr-text:         #1c1409;
  --clr-muted:        #4a3728;
  --clr-border:       rgba(194, 65, 12, 0.30);
  --hero-vignette:    rgba(250, 246, 238, 0.82);
  --nav-bg:           rgba(250, 246, 238, 0.90);
  --nav-bg-scrolled:  rgba(250, 246, 238, 0.97);
  --nav-mobile-bg:    rgba(250, 246, 238, 0.99);
}

/* ── Theme: Amethyst (deep purple) ───────────────────────────
   60 %: #0a0718 / #130f28   30 %: #1e1840 / #0e0b20
   10 %: #a855f7 (violet)  ·  contrast on bg ≈ 5.7:1  ✓      */
html[data-theme="amethyst"] {
  --clr-bg:           #0a0718;
  --clr-surface:      #130f28;
  --clr-surface2:     #1e1840;
  --clr-navy:         #0e0b20;
  --clr-blue:         #5b21b6;
  --clr-cyan:         #a855f7;
  --clr-teal:         #c084fc;
  --clr-neon:         #e879f9;
  --clr-neon2:        #7c3aed;
  --clr-text:         #f5f0ff;
  --clr-muted:        #a78bfa;
  --clr-border:       rgba(168, 85, 247, 0.25);
  --hero-vignette:    rgba(10, 7, 24, 0.80);
  --nav-bg:           rgba(10, 7, 24, 0.75);
  --nav-bg-scrolled:  rgba(10, 7, 24, 0.95);
  --nav-mobile-bg:    rgba(10, 7, 24, 0.97);
}

/* ============================================================
   Per-theme visual corrections
   Hardcoded rgba(6,182,212,…) colours in index.html are
   overridden here for each non-Cyber theme.
   ============================================================ */

/* ── Geo SVG (about section orbit rings) ────────────────────
   Applies CSS hue-rotate so all hardcoded cyan SVG colours
   shift to the correct accent hue for each theme.
   Cyan ≈ H188°  →  Forest (188+314) mod 360 = 142° (green)
                 →  Solar  (188+205) mod 360 = 33°  (amber)
                 →  Amethyst 188+92 = 280°           (violet)
   NOTE: drop-shadow() cannot use CSS custom properties,
   so accent colours are hard-coded in each filter value.     */
html[data-theme="forest"]   .geo-figure svg {
  filter: hue-rotate(314deg) drop-shadow(0 0 18px rgba(34, 197, 94, 0.28));
}
html[data-theme="solar"]    .geo-figure svg {
  filter: hue-rotate(205deg) saturate(1.2) drop-shadow(0 0 18px rgba(194, 65, 12, 0.28));
}
html[data-theme="amethyst"] .geo-figure svg {
  filter: hue-rotate(92deg) drop-shadow(0 0 18px rgba(168, 85, 247, 0.28));
}

/* ── Interest-card icons (all-hardcoded SVGs) ───────────────── */
html[data-theme="forest"]   .int-icon { filter: hue-rotate(314deg); }
html[data-theme="solar"]    .int-icon { filter: hue-rotate(205deg) saturate(1.2); }
html[data-theme="amethyst"] .int-icon { filter: hue-rotate(92deg); }

/* ── Hero badge background ─────────────────────────────────── */
html[data-theme="forest"]   .hero-badge { background: rgba(34,  197, 94,  0.12); }
html[data-theme="solar"]    .hero-badge { background: rgba(194, 65,  12,  0.10); }
html[data-theme="amethyst"] .hero-badge { background: rgba(168, 85,  247, 0.12); }

/* ── Lang-toggle hover background ──────────────────────────── */
html[data-theme="forest"]   .lang-toggle:hover { background: rgba(34,  197, 94,  0.08); }
html[data-theme="solar"]    .lang-toggle:hover { background: rgba(194, 65,  12,  0.08); }
html[data-theme="amethyst"] .lang-toggle:hover { background: rgba(168, 85,  247, 0.08); }

/* ── Theme-toggle hover (Solar needs light bg, not near-black) ─ */
html[data-theme="solar"] .theme-toggle:hover,
html[data-theme="solar"] .theme-toggle[aria-expanded="true"] {
  background: rgba(194, 65, 12, 0.08);
}

/* ── Clinical section – hardcoded dark-navy background ────────
   The section uses linear-gradient(#0d1b2a…) which looks wrong
   in non-Cyber themes. Override with theme-appropriate bg.     */
html[data-theme="forest"] #clinical {
  background: linear-gradient(135deg, #0a1f14 0%, #091510 50%, #0f2318 100%);
}
html[data-theme="solar"] #clinical {
  background: linear-gradient(135deg, #e8dfd0 0%, #ede5d2 50%, #e2d8c5 100%);
}
html[data-theme="amethyst"] #clinical {
  background: linear-gradient(135deg, #18103a 0%, #14102c 50%, #1c1545 100%);
}

/* ── Clinical section glow blobs (::before / ::after) ────────── */
html[data-theme="forest"] #clinical::before {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
}
html[data-theme="forest"] #clinical::after {
  background: radial-gradient(circle, rgba(22, 101, 52, 0.08) 0%, transparent 70%);
}
html[data-theme="solar"] #clinical::before {
  background: radial-gradient(circle, rgba(194, 65, 12, 0.07) 0%, transparent 70%);
}
html[data-theme="solar"] #clinical::after {
  background: radial-gradient(circle, rgba(234, 88, 12, 0.07) 0%, transparent 70%);
}
html[data-theme="amethyst"] #clinical::before {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
}
html[data-theme="amethyst"] #clinical::after {
  background: radial-gradient(circle, rgba(232, 121, 249, 0.08) 0%, transparent 70%);
}

/* ── Clinical card – hardcoded border & hover bg ─────────────── */
html[data-theme="forest"] .clinical-card {
  border-color: rgba(34,  197, 94,  0.20);
}
html[data-theme="forest"] .clinical-card:hover {
  background: rgba(34,  197, 94,  0.06);
}
html[data-theme="solar"] .clinical-card {
  border-color: rgba(194, 65,  12,  0.22);
  background: rgba(255, 255, 255, 0.40);
}
html[data-theme="solar"] .clinical-card:hover {
  background: rgba(194, 65,  12,  0.06);
}
html[data-theme="amethyst"] .clinical-card {
  border-color: rgba(168, 85,  247, 0.22);
}
html[data-theme="amethyst"] .clinical-card:hover {
  background: rgba(168, 85,  247, 0.06);
}

/* ── Project / Material card hover shimmer gradient ──────────── */
html[data-theme="forest"] .project-card::before,
html[data-theme="forest"] .material-card::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, transparent 60%);
}
html[data-theme="solar"] .project-card::before,
html[data-theme="solar"] .material-card::before {
  background: linear-gradient(135deg, rgba(194, 65, 12, 0.05) 0%, transparent 60%);
}
html[data-theme="amethyst"] .project-card::before,
html[data-theme="amethyst"] .material-card::before {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, transparent 60%);
}

/* ── Card hover box-shadows ──────────────────────────────────── */
html[data-theme="forest"] .interest-card:hover,
html[data-theme="forest"] .project-card:hover,
html[data-theme="forest"] .material-card:hover {
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.14);
}
html[data-theme="forest"] .research-col:hover { box-shadow: 0 0 30px rgba(34, 197, 94, 0.10); }

html[data-theme="solar"] .interest-card:hover,
html[data-theme="solar"] .project-card:hover,
html[data-theme="solar"] .material-card:hover {
  box-shadow: 0 8px 30px rgba(194, 65, 12, 0.14);
}
html[data-theme="solar"] .research-col:hover { box-shadow: 0 0 30px rgba(194, 65, 12, 0.10); }

html[data-theme="amethyst"] .interest-card:hover,
html[data-theme="amethyst"] .project-card:hover,
html[data-theme="amethyst"] .material-card:hover {
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.14);
}
html[data-theme="amethyst"] .research-col:hover { box-shadow: 0 0 30px rgba(168, 85, 247, 0.10); }

/* ── Scrollbar tinting ────────────────────────────────────────── */
html[data-theme="solar"] ::-webkit-scrollbar-thumb { background: #c2410c; }
html[data-theme="solar"] ::-webkit-scrollbar-track  { background: #faf6ee; }

/* ============================================================
   Theme Picker UI
   ============================================================ */

/* ── Wrapper (relative anchor for the panel) ─────────────── */
.theme-picker {
  position: relative;
  flex-shrink: 0;
}

/* ── Toggle button ────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.theme-toggle:hover,
.theme-toggle[aria-expanded="true"] {
  color: var(--clr-cyan);
  border-color: var(--clr-cyan);
  background: rgba(0,0,0,0.06);
}

/* ── Dropdown panel ───────────────────────────────────────── */
.theme-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 0.75rem;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
  min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 200;
}

.theme-panel.open {
  display: grid;
}

/* ── Individual theme option ──────────────────────────────── */
.theme-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
  width: 100%;
  text-align: left;
}

.theme-option:hover {
  background: rgba(128,128,128,0.1);
}

.theme-option.active {
  border-color: var(--clr-cyan);
  background: rgba(128,128,128,0.08);
}

/* ── Colour swatch circle ─────────────────────────────────── */
.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}

.theme-swatch--cyber     { background: linear-gradient(135deg, #0a0e1a 50%, #06b6d4 50%); }
.theme-swatch--forest    { background: linear-gradient(135deg, #060e09 50%, #22c55e 50%); }
.theme-swatch--solar     { background: linear-gradient(135deg, #faf6ee 50%, #c2410c 50%); border-color: rgba(0,0,0,0.12); }
.theme-swatch--amethyst  { background: linear-gradient(135deg, #0a0718 50%, #a855f7 50%); }