/* ═══════════════════════════════════════════
   TOPHERBLAKE — Theme System
   Default: Midnight Purple
   ═══════════════════════════════════════════ */

/* ── Midnight Purple (default) ── */
html,
[data-theme="midnight-purple"] {
  --bg-primary:      #120F1A;
  --bg-secondary:    #1A1625;
  --bg-tertiary:     #261F36;
  --bg-card:         #261F36;
  --text-primary:    #F5F3F7;
  --text-secondary:  #8678A0;
  --text-tertiary:   #3D3356;
  --accent:          #A78BFA;
  --accent-hover:    #C4B5FD;
  --accent-glow:     rgba(167,139,250,0.2);
  --border:          rgba(167,139,250,0.12);
  --border-mid:      rgba(167,139,250,0.22);
  --green:           #34D399;
  --red:             #F87171;
  --orange:          #FBBF24;
  --purple:          #C084FC;
  --teal:            #5CCDD6;
  --yellow:          #FCD34D;
  --nav-bg:          rgba(26,22,37,0.88);
  --hero-gradient:   radial-gradient(ellipse 100% 80% at 50% -10%, rgba(167,139,250,0.18) 0%, transparent 60%), linear-gradient(180deg,#120F1A 0%,#1A1625 40%,#1e1830 100%);
  --header-gradient: radial-gradient(ellipse 80% 140% at 50% -20%, rgba(167,139,250,0.16) 0%, transparent 60%), linear-gradient(180deg,#120F1A 0%,#1A1625 100%);
  --callout-bg:      linear-gradient(135deg,#120F1A 0%,#1A1625 50%,#1f1540 100%);
}

/* ── Ocean Blue ── */
[data-theme="ocean-blue"] {
  --bg-primary:      #0D1F2D;
  --bg-secondary:    #102A43;
  --bg-tertiary:     #1A3A52;
  --bg-card:         #1A3A52;
  --text-primary:    #F0F4F8;
  --text-secondary:  #627D98;
  --text-tertiary:   #334E68;
  --accent:          #4DA8DA;
  --accent-hover:    #6DBDE8;
  --accent-glow:     rgba(77,168,218,0.2);
  --border:          rgba(77,168,218,0.12);
  --border-mid:      rgba(77,168,218,0.22);
  --green:           #3EBD93;
  --red:             #F26A6A;
  --orange:          #F7C948;
  --purple:          #38BEC9;
  --teal:            #5CCDD6;
  --yellow:          #F7C948;
  --nav-bg:          rgba(13,31,45,0.88);
  --hero-gradient:   radial-gradient(ellipse 100% 80% at 50% -10%, rgba(77,168,218,0.2) 0%, transparent 60%), linear-gradient(180deg,#0D1F2D 0%,#102A43 40%,#0e2437 100%);
  --header-gradient: radial-gradient(ellipse 80% 140% at 50% -20%, rgba(77,168,218,0.16) 0%, transparent 60%), linear-gradient(180deg,#0D1F2D 0%,#102A43 100%);
  --callout-bg:      linear-gradient(135deg,#0a1a26 0%,#102A43 50%,#0c2038 100%);
}

/* ── Dark Apple ── */
[data-theme="dark-apple"] {
  --bg-primary:      #000000;
  --bg-secondary:    #1d1d1f;
  --bg-tertiary:     #2d2d2f;
  --bg-card:         #141416;
  --text-primary:    #ffffff;
  --text-secondary:  #6e6e73;
  --text-tertiary:   #424245;
  --accent:          #0071e3;
  --accent-hover:    #0077ed;
  --accent-glow:     rgba(0,112,227,0.18);
  --border:          rgba(255,255,255,0.07);
  --border-mid:      rgba(255,255,255,0.12);
  --green:           #30d158;
  --red:             #ff453a;
  --orange:          #ff9f0a;
  --purple:          #5e5ce6;
  --teal:            #64d2ff;
  --yellow:          #ffd60a;
  --nav-bg:          rgba(29,29,31,0.82);
  --hero-gradient:   radial-gradient(ellipse 100% 80% at 50% -10%, rgba(0,112,227,0.18) 0%, transparent 60%), linear-gradient(180deg,#000 0%,#1d1d1f 40%,#18181a 100%);
  --header-gradient: radial-gradient(ellipse 80% 140% at 50% -20%, rgba(0,112,227,0.16) 0%, transparent 60%), linear-gradient(180deg,#000 0%,#1d1d1f 100%);
  --callout-bg:      linear-gradient(135deg,#0a0a0c 0%,#141416 50%,#0c1628 100%);
}

/* ── Slate Light ── */
[data-theme="slate-light"] {
  --bg-primary:      #F8FAFC;
  --bg-secondary:    #FFFFFF;
  --bg-tertiary:     #F1F5F9;
  --bg-card:         #FFFFFF;
  --text-primary:    #0F172A;
  --text-secondary:  #64748B;
  --text-tertiary:   #94A3B8;
  --accent:          #3B82F6;
  --accent-hover:    #2563EB;
  --accent-glow:     rgba(59,130,246,0.12);
  --border:          rgba(15,23,42,0.08);
  --border-mid:      rgba(15,23,42,0.15);
  --green:           #22C55E;
  --red:             #EF4444;
  --orange:          #F59E0B;
  --purple:          #8B5CF6;
  --teal:            #0EA5E9;
  --yellow:          #EAB308;
  --nav-bg:          rgba(248,250,252,0.88);
  --hero-gradient:   radial-gradient(ellipse 100% 80% at 50% -10%, rgba(59,130,246,0.12) 0%, transparent 60%), linear-gradient(180deg,#F8FAFC 0%,#ffffff 40%,#f1f5f9 100%);
  --header-gradient: radial-gradient(ellipse 80% 140% at 50% -20%, rgba(59,130,246,0.1) 0%, transparent 60%), linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
  --callout-bg:      linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 50%,#EFF6FF 100%);
}

/* ── Smooth theme transitions ── */
body { transition: background-color 0.25s ease, color 0.25s ease; }

/* ── Theme switcher dots ── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  margin-left: 14px;
  border-left: 1px solid var(--border);
}

.theme-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.theme-dot:hover { transform: scale(1.2); }
.theme-dot.active { border-color: var(--text-primary); }

.theme-dot[data-theme="midnight-purple"] { background: linear-gradient(135deg,#1A1625,#A78BFA); }
.theme-dot[data-theme="ocean-blue"]      { background: linear-gradient(135deg,#102A43,#4DA8DA); }
.theme-dot[data-theme="dark-apple"]      { background: linear-gradient(135deg,#1d1d1f,#0071e3); }
.theme-dot[data-theme="slate-light"]     { background: linear-gradient(135deg,#c8d6e8,#3B82F6); }

@media (max-width: 600px) { .theme-switcher { display: none; } }

@media (prefers-reduced-motion: reduce) {
  body, *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}