/* ═══════════════════════════════════════════════════════════════
   FrameForge - Halloween Theme 🎃👻
   Tema oscuro con colores naranjas, morados y verdes neón
   ═══════════════════════════════════════════════════════════════ */

:root[data-theme="halloween"] {
  /* ─── Colores base ─── */
  --bg: #0d0a0f;
  --bg-1: #1a0f1f;
  --bg-2: #251828;
  --bg-3: #2f1f35;
  --bg-card: #1f1426;
  --bg-lighter: #2a1a35;
  
  /* ─── Texto ─── */
  --text: #f5e6ff;
  --text-muted: #b399c9;
  --text-dim: #8a7599;
  
  /* ─── Colores Halloween ─── */
  --orange: #ff6b1a;
  --orange-bright: #ff8533;
  --orange-glow: rgba(255, 107, 26, 0.4);
  
  --purple: #9b59d0;
  --purple-bright: #b066ff;
  --purple-glow: rgba(155, 89, 208, 0.4);
  
  --green: #39ff14;
  --green-bright: #5aff3d;
  --green-glow: rgba(57, 255, 20, 0.3);
  
  /* ─── Colores principales ─── */
  --primary: var(--orange);
  --primary-hover: var(--orange-bright);
  --primary-glow: var(--orange-glow);
  
  --secondary: var(--purple);
  --accent: var(--green);
  --accent-glow: var(--green-glow);
  
  /* ─── Bordes y sombras ─── */
  --border: rgba(255, 107, 26, 0.2);
  --border-bright: rgba(255, 107, 26, 0.4);
  --shadow: rgba(0, 0, 0, 0.6);
  
  /* ─── Estados ─── */
  --red: #ff3333;
  --green-success: var(--green);
  --yellow: #ffaa00;
  --blue: #6b9eff;
}

/* ─── Efectos de glow en botones primarios ─── */
:root[data-theme="halloween"] .btn-primary,
:root[data-theme="halloween"] .btn-p {
  box-shadow: 0 0 20px var(--orange-glow);
  transition: all 0.3s ease;
}

:root[data-theme="halloween"] .btn-primary:hover,
:root[data-theme="halloween"] .btn-p:hover {
  box-shadow: 0 0 30px var(--orange-glow),
              0 0 60px var(--orange-glow);
  transform: translateY(-2px);
}

/* ─── Efecto de glow en texto destacado ─── */
:root[data-theme="halloween"] .brand .hl,
:root[data-theme="halloween"] h1 .hl {
  color: var(--orange);
  text-shadow: 0 0 20px var(--orange-glow);
}

/* ─── Topbar con degradado Halloween ─── */
:root[data-theme="halloween"] .topbar {
  background: linear-gradient(135deg, #1a0f1f 0%, #2a1a35 50%, #1f1426 100%);
  border-bottom: 1px solid var(--border-bright);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* ─── Cards con borde neón ─── */
:root[data-theme="halloween"] .card,
:root[data-theme="halloween"] .panel,
:root[data-theme="halloween"] .section {
  border: 1px solid var(--border);
  box-shadow: 0 0 15px rgba(255, 107, 26, 0.1);
}

/* ─── Efectos hover con glow ─── */
:root[data-theme="halloween"] .btn:hover,
:root[data-theme="halloween"] button:hover {
  border-color: var(--orange);
  box-shadow: 0 0 15px var(--orange-glow);
}

/* ─── Scrollbar temático ─── */
:root[data-theme="halloween"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--orange) 0%, var(--purple) 100%);
  border: 2px solid var(--bg);
}

:root[data-theme="halloween"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--orange-bright) 0%, var(--purple-bright) 100%);
  box-shadow: 0 0 10px var(--orange-glow);
}

/* ─── Inputs y controles ─── */
:root[data-theme="halloween"] input[type="range"]::-webkit-slider-thumb {
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}

:root[data-theme="halloween"] input[type="range"]::-moz-range-thumb {
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}

/* ─── Animación de pulso para elementos destacados ─── */
@keyframes halloween-pulse {
  0%, 100% { 
    box-shadow: 0 0 10px var(--orange-glow);
  }
  50% { 
    box-shadow: 0 0 25px var(--orange-glow),
                0 0 40px var(--orange-glow);
  }
}

:root[data-theme="halloween"] .highlight,
:root[data-theme="halloween"] .active {
  animation: halloween-pulse 2s infinite;
}

/* ─── Gradientes en fondos ─── */
:root[data-theme="halloween"] .header,
:root[data-theme="halloween"] .modal-header {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
}

/* ─── Toast/Notifications con colores Halloween ─── */
:root[data-theme="halloween"] .toast.success {
  background: linear-gradient(135deg, #39ff14 0%, #2ecc00 100%);
  box-shadow: 0 4px 20px var(--green-glow);
}

:root[data-theme="halloween"] .toast.warning {
  background: linear-gradient(135deg, #ffaa00 0%, #ff8800 100%);
  box-shadow: 0 4px 20px rgba(255, 170, 0, 0.4);
}

:root[data-theme="halloween"] .toast.error {
  background: linear-gradient(135deg, #ff3333 0%, #cc0000 100%);
  box-shadow: 0 4px 20px rgba(255, 51, 51, 0.4);
}

/* ─── Partículas flotantes (opcional - solo desktop) ─── */
@media (min-width: 769px) {
  :root[data-theme="halloween"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: 
      radial-gradient(circle at 20% 30%, var(--purple-glow) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, var(--orange-glow) 0%, transparent 50%);
    opacity: 0.3;
    z-index: -1;
  }
}

/* ─── Links con efecto hover neón ─── */
:root[data-theme="halloween"] a:hover {
  color: var(--orange-bright);
  text-shadow: 0 0 10px var(--orange-glow);
}

/* ─── Badges y etiquetas ─── */
:root[data-theme="halloween"] .badge,
:root[data-theme="halloween"] .tag {
  background: var(--purple);
  color: white;
  box-shadow: 0 0 10px var(--purple-glow);
}

/* ─── Canvas y áreas de visualización ─── */
:root[data-theme="halloween"] canvas {
  border: 1px solid var(--border);
  box-shadow: 0 0 20px rgba(255, 107, 26, 0.15);
}

/* ─── Sidebar ─── */
:root[data-theme="halloween"] .sidebar,
:root[data-theme="halloween"] .anim-sidebar {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border-right: 1px solid var(--border-bright);
}

/* ─── Dropdown menu ─── */
:root[data-theme="halloween"] .dropdown-menu {
  background: var(--bg-2);
  border: 1px solid var(--border-bright);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
              0 0 20px var(--orange-glow);
}

/* ─── Loading spinner ─── */
:root[data-theme="halloween"] .loading-spinner,
:root[data-theme="halloween"] .spinner {
  border-top-color: var(--orange);
  filter: drop-shadow(0 0 10px var(--orange-glow));
}

/* ─── Iconos especiales (si existen en Lucide) ─── */
:root[data-theme="halloween"] [data-lucide="ghost"] {
  color: var(--green);
  filter: drop-shadow(0 0 8px var(--green-glow));
}

:root[data-theme="halloween"] [data-lucide="skull"] {
  color: var(--orange);
}

:root[data-theme="halloween"] [data-lucide="flame"],
:root[data-theme="halloween"] [data-lucide="fire"] {
  color: var(--orange-bright);
  filter: drop-shadow(0 0 8px var(--orange-glow));
}

/* ─── Modo de alto contraste (accesibilidad) ─── */
@media (prefers-contrast: high) {
  :root[data-theme="halloween"] {
    --border: rgba(255, 107, 26, 0.5);
    --text: #ffffff;
  }
}