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

:root {
  --background: 210 40% 98%;
  --foreground: 220 25% 15%;

  --card: 0 0% 100%;
  --card-foreground: 220 25% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 15%;

  --primary: 220 80% 55%;
  --primary-foreground: 0 0% 100%;

  --secondary: 280 60% 55%;
  --secondary-foreground: 0 0% 100%;

  --accent: 175 60% 40%;
  --accent-foreground: 0 0% 100%;

  --coral: 10 80% 65%;
  --coral-foreground: 0 0% 100%;

  --muted: 210 30% 95%;
  --muted-foreground: 220 15% 45%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 220 80% 55%;

  --radius: 0.75rem;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(220 80% 55%) 0%, hsl(280 60% 55%) 50%, hsl(10 80% 65%) 100%);
  --gradient-subtle: linear-gradient(135deg, hsl(220 80% 55% / 0.1) 0%, hsl(280 60% 55% / 0.1) 50%, hsl(10 80% 65% / 0.1) 100%);
  --gradient-hero: linear-gradient(180deg, hsl(210 40% 98%) 0%, hsl(220 40% 95%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(210 30% 98%) 100%);
  --gradient-text: linear-gradient(135deg, hsl(220 80% 55%) 0%, hsl(280 60% 55%) 50%, hsl(10 80% 65%) 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px -2px hsl(220 80% 55% / 0.1);
  --shadow-md: 0 8px 24px -8px hsl(220 80% 55% / 0.15);
  --shadow-lg: 0 16px 48px -12px hsl(220 80% 55% / 0.2);
  --shadow-glow: 0 0 40px -10px hsl(280 60% 55% / 0.3);

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 220 25% 8%;
  --foreground: 210 40% 98%;

  --card: 220 25% 12%;
  --card-foreground: 210 40% 98%;

  --popover: 220 25% 12%;
  --popover-foreground: 210 40% 98%;

  --primary: 220 80% 60%;
  --primary-foreground: 220 25% 8%;

  --secondary: 280 60% 60%;
  --secondary-foreground: 220 25% 8%;

  --muted: 220 20% 18%;
  --muted-foreground: 215 20% 65%;

  --accent: 175 60% 45%;
  --accent-foreground: 220 25% 8%;

  --coral: 10 80% 65%;
  --coral-foreground: 220 25% 8%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --border: 220 20% 18%;
  --input: 220 20% 18%;
  --ring: 220 80% 60%;

  --gradient-hero: linear-gradient(180deg, hsl(220 25% 8%) 0%, hsl(220 25% 12%) 100%);
  --gradient-card: linear-gradient(145deg, hsl(220 25% 14%) 0%, hsl(220 25% 10%) 100%);

  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

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

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* Custom Utility Classes */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  background: hsl(var(--card));
  border-radius: var(--radius);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass {
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

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

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

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

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}