/* ================================================================
   HMWorkout — theme.css
   Light / Dark Mode Toggle System
   ================================================================ */

/* ── Dark Mode Overrides ────────────────────────────────────── */
html.dark {
  --bg-base:       #060D1F;
  --bg-surface:    #0C1630;
  --bg-raised:     #0F1E40;
  --bg-card:       #111F44;
  --bg-input:      #0F1B38;
  --bg-overlay:    rgba(6, 13, 31, 0.75);

  --t-primary:     #EEF2FF;
  --t-secondary:   #94A3C8;
  --t-muted:       #5A6990;
  --t-link:        #5B9BFF;

  --border:        #1C2E58;
  --border-strong: #2A3F6E;

  --shadow-sm:    0 2px 8px  rgba(0,0,0,0.25);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.45);
  --shadow-xl:    0 24px 80px rgba(0,0,0,0.55);
  --shadow-glow:  0 0 60px rgba(21,87,255,0.35);

  --grad-card: linear-gradient(145deg, rgba(17,31,68,0.9) 0%, rgba(15,26,64,0.8) 100%);
  --grad-mesh: radial-gradient(at 40% 20%, hsla(217,100%,56%,0.20) 0px, transparent 50%),
               radial-gradient(at 80% 0%,   hsla(23,100%,55%,0.12) 0px, transparent 50%),
               radial-gradient(at 0% 50%,   hsla(236,100%,57%,0.15) 0px, transparent 50%);
}

/* ── Glassmorphism (works in both modes) ─────────────────────── */
.glass {
  background: var(--grad-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
}

html.dark .glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(255,255,255,0.06);
}

/* ── Theme Toggle Button ─────────────────────────────────────── */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--t-secondary);
  transition: var(--ease-smooth);
  font-size: 16px;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
  transform: rotate(20deg) scale(1.1);
}

/* ── Theme Transition ────────────────────────────────── */
html.transitioning * {
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease !important;
}

/* ── Neon Gym Glow Styling Extensions (Task 8) ────────────────── */
:root {
  --c-neon-orange: #FF6B00;
  --c-neon-blue:   #00E5FF;
  --c-neon-green:  #00E676;
}

/* Glowing card effect */
.glow-card {
  position: relative;
  transition: all 0.3s ease;
}
.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 15px rgba(255,107,0,0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.glow-card:hover::after {
  box-shadow: 0 0 25px rgba(255,107,0,0.25);
  opacity: 1;
}

/* Glowing button style */
.btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.35);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  box-shadow: 0 6px 25px rgba(255, 107, 0, 0.6);
  transform: translateY(-2px);
}

/* Neon Glow Ring Pulse for Timers */
.timer-pulse {
  animation: timerGlowPulse 2s infinite ease-in-out;
}
@keyframes timerGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.8)); }
}

/* Glassmorphism details */
.glass-surface {
  background: rgba(12, 22, 48, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}