@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base Dark Theme */
:root {
    --base-dark: #050810;
    --primary: #4fb3d9;
    --secondary: #2980b9;
    --border: rgba(255, 255, 255, 0.1);
    
    /* Category Colors */
    --web-dev: #3b82f6;
    --data-science: #8b5cf6;
    --mobile: #10b981;
    --cloud: #f59e0b;
    --cybersecurity: #ef4444;
    --backend: #6366f1;
    --design: #ec4899;
}

/* Glass Effect Base */
.glass-effect {
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    background: rgba(10, 14, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
}

/* Glass Effect Strong */
.glass-effect-strong {
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    background: rgba(10, 14, 26, 0.95);
    border: 1px solid rgba(75, 179, 217, 0.2);
    border-radius: 2rem;
}

/* Card Glass */
.card-glass {
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    background: rgba(10, 14, 26, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    transition: all 0.3s ease;
}

.card-glass-hover:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Sparkle Effect */
@keyframes sparkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

.sparkle-dot {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: sparkle 2s ease-in-out infinite;
}

/* Category Gradients */
.gradient-web-dev {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(15, 23, 42, 0.7), rgba(6, 182, 212, 0.7));
}

.gradient-data-science {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(15, 23, 42, 0.7), rgba(236, 72, 153, 0.7));
}

.gradient-mobile {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.7), rgba(15, 23, 42, 0.7), rgba(16, 185, 129, 0.7));
}

.gradient-cloud {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.7), rgba(15, 23, 42, 0.7), rgba(234, 179, 8, 0.7));
}

.gradient-cybersecurity {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.7), rgba(15, 23, 42, 0.7), rgba(244, 63, 94, 0.7));
}

/* Button Variants */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 30px -5px rgba(75, 179, 217, 0.25);
}

.btn-ghost {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, #ffd93d, #ff9800);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Level Badges */
.badge-beginner {
    background: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.badge-intermediate {
    background: rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.badge-advanced {
    background: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

/* Utility Classes */
.bg-base-dark {
    background-color: var(--base-dark);
}

.bg-gradient-radial {
    background-image: radial-gradient(circle, var(--tw-gradient-stops));
}

/* Animation Glow */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(75, 179, 217, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(75, 179, 217, 0.6);
    }
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Global Styles */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--base-dark);
  color: white;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background Effects */
.bg-base-dark {
  background-color: var(--base-dark);
}

.bg-gradient-radial {
  background-image: radial-gradient(circle, var(--tw-gradient-stops));
}

/* Glass Effect Components */
.glass-effect {
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  background: rgba(10, 14, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
}

.glass-effect-strong {
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  background: rgba(10, 14, 26, 0.95);
  border: 1px solid rgba(75, 179, 217, 0.2);
  border-radius: 2rem;
}

/* Button Styles */
.btn-primary {
  @apply bg-gradient-to-r from-primary to-secondary text-white font-semibold py-3 px-6 rounded-xl;
  @apply hover:shadow-lg hover:shadow-primary/25 transition-all duration-300;
  @apply hover:scale-105 active:scale-95;
}

.btn-secondary {
  @apply bg-slate-800/50 text-gray-300 font-semibold py-3 px-6 rounded-xl;
  @apply border-2 border-border/30 hover:border-border/50;
  @apply hover:text-white transition-all duration-300;
}

.btn-ghost {
  @apply bg-transparent text-gray-400 font-semibold py-3 px-6 rounded-xl;
  @apply border-2 border-border/30 hover:border-border/50;
  @apply hover:text-white hover:bg-white/5 transition-all duration-300;
}

/* Card Styles */
.card-glass {
  @apply backdrop-blur-3xl border border-border/10 rounded-[1.5rem] p-6;
  @apply hover:border-border/30 transition-all duration-300;
  @apply hover:scale-[1.02] hover:shadow-2xl;
}

.card-glass-hover {
  @apply card-glass;
  @apply group-hover:shadow-cyan-500/20;
}

/* Gradient Backgrounds */
.gradient-primary {
  background: linear-gradient(135deg, #4fb3d9, #2980b9);
}

.gradient-secondary {
  background: linear-gradient(135deg, #2980b9, #1e3a8a);
}

.gradient-warning {
  background: linear-gradient(135deg, #ffd93d, #ff9800);
}

.gradient-success {
  background: linear-gradient(135deg, #10b981, #059669);
}

.gradient-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Category-based Gradients */
.gradient-web {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(15, 25, 40, 0.75), rgba(6, 182, 212, 0.7));
}

.gradient-data {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.7), rgba(15, 25, 40, 0.75), rgba(236, 72, 153, 0.7));
}

.gradient-mobile {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.7), rgba(15, 25, 40, 0.75), rgba(16, 185, 129, 0.7));
}

.gradient-cloud {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.7), rgba(15, 25, 40, 0.75), rgba(251, 191, 36, 0.7));
}

.gradient-security {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.7), rgba(15, 25, 40, 0.75), rgba(244, 63, 94, 0.7));
}

.gradient-design {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.7), rgba(15, 25, 40, 0.75), rgba(236, 72, 153, 0.7));
}

/* Animations */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(79, 179, 217, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(79, 179, 217, 0.6);
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Sparkle Animation */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-sparkle {
  animation: sparkle 2s ease-in-out infinite;
}

/* Text Utilities */
.text-gradient {
  background: linear-gradient(135deg, #4fb3d9, #2980b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-warning {
  background: linear-gradient(135deg, #ffd93d, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-success {
  background: linear-gradient(135deg, #10b981, #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Line Clamp Utilities */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 25, 40, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(79, 179, 217, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 179, 217, 0.7);
}

/* Focus States */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50;
}

/* Hover Effects */
.hover-lift {
  @apply transition-transform duration-300 hover:scale-105;
}

.hover-glow {
  @apply transition-shadow duration-300 hover:shadow-lg hover:shadow-primary/25;
}

/* Loading States */
.loading-skeleton {
  @apply animate-pulse bg-slate-700/50 rounded;
}

/* Status Colors */
.status-success {
  @apply text-green-400 bg-green-900/30;
}

.status-warning {
  @apply text-yellow-400 bg-yellow-900/30;
}

.status-error {
  @apply text-red-400 bg-red-900/30;
}

.status-info {
  @apply text-blue-400 bg-blue-900/30;
}

/* Responsive Design */
@media (max-width: 768px) {
  .card-glass {
    @apply p-4 rounded-xl;
  }
  
  .glass-effect-strong {
    @apply rounded-xl;
  }
}

/* Print Styles */
@media print {
  .glass-effect,
  .glass-effect-strong {
    background: white;
    border: 1px solid #ccc;
    box-shadow: none;
  }
}