/* NEORK Design Tokens & Dynamic 5-Neon Engine */
:root {
  /* Pitch Black Architecture */
  --bg-primary: #050507;
  --bg-secondary: #0b0b0f;
  --bg-surface: #121218;
  --bg-card: rgba(18, 18, 24, 0.72);
  --bg-glass: rgba(8, 8, 12, 0.82);
  
  /* Curated Typography Tones */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.12);
  
  /* Default Neon: Cyber Lime */
  --neon-name: 'CYBER LIME';
  --neon-accent: #00ff66;
  --neon-glow: rgba(0, 255, 102, 0.45);
  --neon-dim: rgba(0, 255, 102, 0.12);
  --neon-border: rgba(0, 255, 102, 0.5);
  --neon-rgb: 0, 255, 102;
  
  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-theme: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* 5 Dynamic Neon Palettes */
[data-theme="cyber-lime"] {
  --neon-name: 'CYBER LIME';
  --neon-accent: #00ff66;
  --neon-glow: rgba(0, 255, 102, 0.45);
  --neon-dim: rgba(0, 255, 102, 0.12);
  --neon-border: rgba(0, 255, 102, 0.5);
  --neon-rgb: 0, 255, 102;
}

[data-theme="acid-cyan"] {
  --neon-name: 'ACID CYAN';
  --neon-accent: #00f5d4;
  --neon-glow: rgba(0, 245, 212, 0.45);
  --neon-dim: rgba(0, 245, 212, 0.12);
  --neon-border: rgba(0, 245, 212, 0.5);
  --neon-rgb: 0, 245, 212;
}

[data-theme="hyper-violet"] {
  --neon-name: 'HYPER VIOLET';
  --neon-accent: #b026ff;
  --neon-glow: rgba(176, 38, 255, 0.45);
  --neon-dim: rgba(176, 38, 255, 0.14);
  --neon-border: rgba(176, 38, 255, 0.5);
  --neon-rgb: 176, 38, 255;
}

[data-theme="hot-pink"] {
  --neon-name: 'HOT MAGENTA';
  --neon-accent: #ff007f;
  --neon-glow: rgba(255, 0, 127, 0.45);
  --neon-dim: rgba(255, 0, 127, 0.12);
  --neon-border: rgba(255, 0, 127, 0.5);
  --neon-rgb: 255, 0, 127;
}

[data-theme="solar-blaze"] {
  --neon-name: 'SOLAR BLAZE';
  --neon-accent: #ff5e00;
  --neon-glow: rgba(255, 94, 0, 0.45);
  --neon-dim: rgba(255, 94, 0, 0.14);
  --neon-border: rgba(255, 94, 0, 0.5);
  --neon-rgb: 255, 94, 0;
}

/* Neon Glow Utility Classes & Animations */
.neon-text {
  color: var(--neon-accent);
  text-shadow: 0 0 16px var(--neon-glow);
  transition: var(--transition-theme);
}

.neon-box-glow {
  box-shadow: 0 0 25px -5px var(--neon-glow);
  border-color: var(--neon-accent) !important;
}

.neon-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: var(--neon-dim);
  border: 1px solid var(--neon-border);
  color: var(--neon-accent);
  transition: var(--transition-theme);
}

.neon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--neon-accent);
  box-shadow: 0 0 8px var(--neon-accent);
  animation: pulseNeonDot 2s infinite ease-in-out;
}

@keyframes pulseNeonDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px var(--neon-accent);
  }
  50% {
    transform: scale(1.4);
    opacity: 0.7;
    box-shadow: 0 0 16px var(--neon-accent);
  }
}

@keyframes neonBorderPulse {
  0%, 100% {
    border-color: rgba(var(--neon-rgb), 0.3);
    box-shadow: 0 0 15px -4px rgba(var(--neon-rgb), 0.2);
  }
  50% {
    border-color: rgba(var(--neon-rgb), 0.8);
    box-shadow: 0 0 24px -2px rgba(var(--neon-rgb), 0.5);
  }
}

/* Atmospheric Ambient Glow Background Mesh */
.ambient-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 15% 20%, rgba(var(--neon-rgb), 0.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(var(--neon-rgb), 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(var(--neon-rgb), 0.03) 0%, transparent 50%);
  transition: background var(--transition-theme);
}

/* Liquid Moving Neon Orbs */
.ambient-mesh::before,
.ambient-mesh::after {
  content: '';
  position: absolute;
  filter: blur(90px);
  opacity: 0.12;
  mix-blend-mode: screen;
  transition: background var(--transition-theme), border-radius 2s ease;
  pointer-events: none;
  animation: liquidOrbFloat 22s infinite ease-in-out alternate;
}

.ambient-mesh::before {
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  top: -10%;
  left: -10%;
  background: var(--neon-accent);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation-delay: 0s;
}

.ambient-mesh::after {
  width: 45vw;
  height: 45vw;
  max-width: 500px;
  max-height: 500px;
  bottom: -10%;
  right: -10%;
  background: var(--neon-accent);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation-delay: -11s;
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

@keyframes liquidOrbFloat {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
  33% {
    transform: translate(12vw, 15vh) scale(1.15) rotate(90deg);
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%;
  }
  66% {
    transform: translate(-8vw, 25vh) scale(0.9) rotate(180deg);
    border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%;
  }
  100% {
    transform: translate(10vw, -15vh) scale(1.2) rotate(270deg);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  }
}