@import "tailwindcss";
@config "../tailwind.config.js";

@layer base {
  :root {
    --background: 222 47% 4%;
    --foreground: 210 40% 98%;
    --card: 222 47% 8%;
    --card-glass: 222 47% 12% / 0.6;
    --card-foreground: 210 40% 98%;
    --primary: 199 89% 52%;
    --primary-foreground: 210 40% 98%;
    --secondary: 217 33% 15%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217 33% 15%;
    --muted-foreground: 215 20% 65%;
    --accent: 217 33% 20%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 72% 55%;
    --destructive-foreground: 210 40% 98%;
    --border: 217 33% 20% / 0.5;
    --input: 217 33% 20%;
    --ring: 199 89% 52%;
    --radius: 0.85rem;
    --glow: 199 89% 52% / 0.15;
  }

  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    
    /* Mesh gradient background */
    background-image: 
      radial-gradient(circle at 15% 50%, hsl(260 50% 15% / 0.15) 0%, transparent 50%),
      radial-gradient(circle at 85% 30%, hsl(var(--primary) / 0.1) 0%, transparent 50%);
    background-attachment: fixed;
  }

  html,
  body,
  #root {
    min-height: 100%;
  }
}

@layer utilities {
  .glass {
    background-color: hsl(var(--card-glass));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--border));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }

  .glow {
    box-shadow: 0 0 20px hsl(var(--glow));
  }
}

@keyframes bar-pulse {
  0%, 100% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(1.2);
  }
}

.animate-bar-pulse {
  animation: bar-pulse 0.4s ease-in-out infinite;
  transform-origin: bottom;
}