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

:root {
  /* HSL Colors */
  --background: 0 0% 100%;
  --foreground: 215 25% 27%;

  --card: 0 0% 100%;
  --card-foreground: 215 25% 27%;

  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 27%;

  --primary: 210 100% 35%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 100% 96%;
  --secondary-foreground: 210 100% 35%;

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

  --accent: 205 100% 45%;
  --accent-foreground: 0 0% 100%;

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

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 210 100% 35%;

  --radius: 0.75rem;
  
  --gradient-primary: linear-gradient(135deg, hsl(210, 100%, 35%) 0%, hsl(205, 100%, 45%) 100%);
  --gradient-hero: linear-gradient(135deg, hsl(210, 100%, 40%) 0%, hsl(205, 95%, 50%) 100%);
  --shadow-soft: 0 4px 20px -2px rgba(0, 70, 150, 0.1);
  --shadow-strong: 0 10px 40px -5px rgba(0, 70, 150, 0.2);
}

.dark {
  --background: 215 28% 17%;
  --foreground: 210 40% 98%;

  --card: 215 25% 20%;
  --card-foreground: 210 40% 98%;

  --popover: 215 25% 20%;
  --popover-foreground: 210 40% 98%;

  --primary: 205 100% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 215 25% 25%;
  --secondary-foreground: 210 40% 98%;

  --muted: 215 25% 25%;
  --muted-foreground: 215 20% 65%;

  --accent: 205 100% 45%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;

  --border: 215 25% 25%;
  --input: 215 25% 25%;
  --ring: 205 100% 50%;
}

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

body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  scroll-behavior: smooth;
  overflow-x: hidden;
}

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

/* Toast Notification Styles */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 2rem);
}

.toast {
  pointer-events: auto;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}

.toast-description {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.toast-destructive {
  border-color: hsl(var(--destructive));
  background-color: hsl(var(--destructive) / 0.05);
}

.toast-destructive .toast-title {
  color: hsl(var(--destructive));
}

/* Custom styles mapping tailwind colors and gradients */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-strong {
  box-shadow: var(--shadow-strong);
}

/* Scroll padding to avoid navbar overlap */
html {
  scroll-padding-top: 80px;
}

/* Micro-animations */
@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

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