/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Styles & Variables */
:root {
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --primary: 217 91% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;

  --accent: 162 73% 46%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 217 91% 50%;

  --radius: 0.75rem;

  /* Custom design tokens */
  --gradient-primary: linear-gradient(135deg, hsl(217 91% 50%), hsl(199 89% 48%));
  --gradient-accent: linear-gradient(135deg, hsl(162 73% 46%), hsl(172 66% 50%));
  --gradient-hero: linear-gradient(135deg, hsl(217 91% 50%), hsl(262 83% 58%));
  
  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
  --shadow-primary: 0 10px 40px -10px hsl(217 91% 50% / 0.4);
  --shadow-card: 0 4px 20px -2px hsl(0 0% 0% / 0.08);

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

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

.gradient-text-accent {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: var(--gradient-accent);
}

.gradient-text-hero {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: var(--gradient-hero);
}

.card-elevated {
  background-color: hsl(var(--card));
  border-radius: 1rem;
  border: 1px solid hsl(var(--border) / 0.5);
  box-shadow: var(--shadow-card);
}

.card-hover {
  transition: all 300ms;
}

.card-hover:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.section-pattern {
  background-image: radial-gradient(hsl(var(--primary) / 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

.hero-gradient {
  background: linear-gradient(135deg, hsl(217 91% 97%) 0%, hsl(199 89% 97%) 50%, hsl(262 83% 97%) 100%);
}

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-slide-up { animation: slideUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }