@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  --card: 222 47% 14%;
  --card-foreground: 210 40% 98%;
  --primary: 189 100% 50%;
  --primary-foreground: 222 47% 11%;
  --secondary: 220 90% 56%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 19% 20%;
  --muted-foreground: 217 19% 75%;
  --border: 217 19% 27%;
  --input: 217 19% 27%;
  --ring: 189 100% 50%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --radius: 0.75rem;
}

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

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

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  max-width: 65ch;
}

.text-balance {
  text-wrap: balance;
}

/* Animations equivalent to Framer Motion */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Custom Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast {
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5);
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.toast-success { border-left: 4px solid #10b981; }
.toast-error { border-left: 4px solid hsl(var(--destructive)); }

/* Accordion Animation */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-content.open {
  max-height: 500px;
}
.accordion-icon {
  transition: transform 0.3s ease;
}
.accordion-btn[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

/* Base Form Inputs */
input, textarea {
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--background)) !important;
}
input::placeholder, textarea::placeholder {
  color: hsl(var(--muted-foreground));
}