@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --background: 220 25% 5%;
  --foreground: 0 0% 98%;
  --card: 220 20% 8%;
  --card-foreground: 0 0% 98%;
  --popover: 220 20% 8%;
  --popover-foreground: 0 0% 98%;
  --primary: 195 100% 50%;
  --primary-foreground: 220 25% 5%;
  --secondary: 220 15% 15%;
  --secondary-foreground: 0 0% 98%;
  --muted: 220 15% 15%;
  --muted-foreground: 220 10% 60%;
  --accent: 35 100% 55%;
  --accent-foreground: 220 25% 5%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 15% 20%;
  --input: 220 15% 15%;
  --ring: 195 100% 50%;
  --radius: 0.625rem;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

code, pre {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Utilities (Tailwind-like but standalone) */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(195 100% 50%) 0%, hsl(35 100% 55%) 100%);
}

.text-gradient-cyan {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(195 100% 60%) 0%, hsl(195 100% 40%) 100%);
}

.glow-cyan {
  box-shadow: 0 0 40px hsl(195 100% 50% / 0.3),
              0 0 80px hsl(195 100% 50% / 0.1);
}

.glow-orange {
  box-shadow: 0 0 40px hsl(35 100% 55% / 0.3),
              0 0 80px hsl(35 100% 55% / 0.1);
}

.border-glow {
  box-shadow: inset 0 0 0 1px hsl(195 100% 50% / 0.2),
              0 0 20px hsl(195 100% 50% / 0.1);
}

.glass {
  background: hsl(220 20% 8% / 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-card {
  background: linear-gradient(145deg, hsl(220 20% 10% / 0.8) 0%, hsl(220 20% 6% / 0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(220 15% 20% / 0.5);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(220 15% 25%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(195 100% 40%);
}

/* Code block styling */
.code-block {
  background: linear-gradient(145deg, hsl(220 25% 8%) 0%, hsl(220 25% 5%) 100%);
  border: 1px solid hsl(220 15% 20%);
  border-radius: var(--radius);
}

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

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

/* Additional fixes for plain CSS (variables usage) */
.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent { color: hsl(var(--accent)); }

/* Canvas fix */
#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}