/* Custom design tokens - replaces tailwind.config theme extensions */
/* Neon color palette */
:root {
  --neon-pink: #ff00ea;
  --neon-cyan: #00f3ff;
  --neon-yellow: #ccff00;
  --neon-purple: #bd00ff;
  --dark-900: #050505;
  --dark-800: #0f0f13;
  --dark-700: #1a1a24;
}

/* Font families */
.font-inter, body { font-family: 'Inter', sans-serif; }
.font-space { font-family: 'Space Grotesk', sans-serif; }
.font-sans { font-family: 'Inter', sans-serif; }

/* Text colors */
.text-neon-pink { color: var(--neon-pink) !important; }
.text-neon-cyan { color: var(--neon-cyan) !important; }
.text-neon-yellow { color: var(--neon-yellow) !important; }
.text-neon-purple { color: var(--neon-purple) !important; }
.text-dark-900 { color: var(--dark-900) !important; }

/* Opacity variants */
.text-neon-cyan\/60 { color: rgba(0, 243, 255, 0.6) !important; }
.text-neon-cyan\/70 { color: rgba(0, 243, 255, 0.7) !important; }
.text-neon-pink\/60 { color: rgba(255, 0, 234, 0.6) !important; }
.text-neon-yellow\/60 { color: rgba(204, 255, 0, 0.6) !important; }

/* Background colors */
.bg-neon-pink { background-color: var(--neon-pink) !important; }
.bg-neon-cyan { background-color: var(--neon-cyan) !important; }
.bg-neon-yellow { background-color: var(--neon-yellow) !important; }
.bg-neon-purple { background-color: var(--neon-purple) !important; }
.bg-dark-900 { background-color: var(--dark-900) !important; }
.bg-dark-800 { background-color: var(--dark-800) !important; }
.bg-dark-700 { background-color: var(--dark-700) !important; }

/* Background opacity variants */
.bg-neon-cyan\/10 { background-color: rgba(0, 243, 255, 0.1) !important; }
.bg-neon-cyan\/15 { background-color: rgba(0, 243, 255, 0.15) !important; }
.bg-neon-cyan\/20 { background-color: rgba(0, 243, 255, 0.2) !important; }
.bg-neon-pink\/10 { background-color: rgba(255, 0, 234, 0.1) !important; }
.bg-neon-pink\/15 { background-color: rgba(255, 0, 234, 0.15) !important; }
.bg-neon-pink\/20 { background-color: rgba(255, 0, 234, 0.2) !important; }
.bg-neon-yellow\/10 { background-color: rgba(204, 255, 0, 0.1) !important; }
.bg-neon-yellow\/20 { background-color: rgba(204, 255, 0, 0.2) !important; }
.bg-neon-purple\/10 { background-color: rgba(189, 0, 255, 0.1) !important; }
.bg-dark-700\/50 { background-color: rgba(26, 26, 36, 0.5) !important; }

/* Border colors */
.border-neon-pink { border-color: var(--neon-pink) !important; }
.border-neon-cyan { border-color: var(--neon-cyan) !important; }
.border-neon-yellow { border-color: var(--neon-yellow) !important; }
.border-neon-purple { border-color: var(--neon-purple) !important; }
.border-dark-900 { border-color: var(--dark-900) !important; }

/* Border opacity variants */
.border-neon-cyan\/20 { border-color: rgba(0, 243, 255, 0.2) !important; }
.border-neon-cyan\/25 { border-color: rgba(0, 243, 255, 0.25) !important; }
.border-neon-cyan\/30 { border-color: rgba(0, 243, 255, 0.3) !important; }
.border-neon-pink\/20 { border-color: rgba(255, 0, 234, 0.2) !important; }
.border-neon-pink\/30 { border-color: rgba(255, 0, 234, 0.3) !important; }
.border-neon-yellow\/15 { border-color: rgba(204, 255, 0, 0.15) !important; }
.border-neon-yellow\/20 { border-color: rgba(204, 255, 0, 0.2) !important; }
.border-neon-yellow\/25 { border-color: rgba(204, 255, 0, 0.25) !important; }
.border-neon-yellow\/30 { border-color: rgba(204, 255, 0, 0.3) !important; }
.border-neon-purple\/15 { border-color: rgba(189, 0, 255, 0.15) !important; }
.border-neon-purple\/20 { border-color: rgba(189, 0, 255, 0.2) !important; }

/* Border left colors */
.border-l-neon-pink { border-left-color: var(--neon-pink) !important; }
.border-l-neon-cyan { border-left-color: var(--neon-cyan) !important; }
.border-l-neon-yellow { border-left-color: var(--neon-yellow) !important; }

/* Hover states */
.hover\:text-neon-pink:hover { color: var(--neon-pink) !important; }
.hover\:text-neon-cyan:hover { color: var(--neon-cyan) !important; }
.hover\:text-neon-yellow:hover { color: var(--neon-yellow) !important; }
.hover\:bg-neon-pink:hover { background-color: var(--neon-pink) !important; }
.hover\:bg-neon-cyan:hover { background-color: var(--neon-cyan) !important; }
.hover\:bg-neon-yellow:hover { background-color: var(--neon-yellow) !important; }
.hover\:bg-neon-cyan\/10:hover { background-color: rgba(0, 243, 255, 0.1) !important; }
.hover\:bg-neon-pink\/10:hover { background-color: rgba(255, 0, 234, 0.1) !important; }
.hover\:border-neon-pink:hover { border-color: var(--neon-pink) !important; }
.hover\:border-neon-cyan:hover { border-color: var(--neon-cyan) !important; }

/* Group hover */
.group:hover .group-hover\:text-neon-pink { color: var(--neon-pink) !important; }
.group:hover .group-hover\:text-neon-cyan { color: var(--neon-cyan) !important; }
.group:hover .group-hover\:text-neon-yellow { color: var(--neon-yellow) !important; }

/* Focus states */
.focus\:border-neon-cyan:focus { border-color: var(--neon-cyan) !important; }
.focus\:border-neon-cyan\/40:focus { border-color: rgba(0, 243, 255, 0.4) !important; }
.focus\:border-neon-pink:focus { border-color: var(--neon-pink) !important; }
.focus\:border-neon-yellow:focus { border-color: var(--neon-yellow) !important; }

/* Active states */
.active\:bg-neon-cyan\/25:active { background-color: rgba(0, 243, 255, 0.25) !important; }
.active\:text-neon-cyan.active { color: var(--neon-cyan) !important; }
.active\:text-neon-pink.active { color: var(--neon-pink) !important; }
.active\:text-neon-yellow.active { color: var(--neon-yellow) !important; }

/* Selection */
.selection\:bg-neon-pink::selection { background-color: var(--neon-pink) !important; }
::selection { background-color: var(--neon-pink); color: white; }

/* Gradient from/to */
.from-neon-pink { --tw-gradient-from: var(--neon-pink); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-neon-cyan { --tw-gradient-from: var(--neon-cyan); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-neon-yellow { --tw-gradient-from: var(--neon-yellow); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-neon-pink { --tw-gradient-to: var(--neon-pink); }
.to-neon-cyan { --tw-gradient-to: var(--neon-cyan); }
.to-neon-yellow { --tw-gradient-to: var(--neon-yellow); }

/* Animations from tailwind.config */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-blob { animation: blob 7s infinite; }
.animate-fadeIn { animation: fadeIn 0.3s ease; }

/* Custom no-scrollbar utility */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* font-inter utility */
.font-inter { font-family: 'Inter', sans-serif; }

/* text-gradient utilities used in pages */
.text-gradient-cyber {
  background: linear-gradient(to right, #00f3ff, #ff00ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-gold {
  background: linear-gradient(to right, #ccff00, #ffb800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}