@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --color-brand-blue: #1e3a8a;
  --color-brand-sky: #0ea5e9;
  --color-brand-terracotta: #c2410c;
  --color-brand-gold: #d97706;
  --color-brand-teal: #0f766e;
  --color-brand-cream: #fbfbf9;
  --color-brand-charcoal: #1c1917;
  --color-brand-lavender: #6d52a3;
  --color-brand-lavender-light: #f5f2fc;
  --color-brand-lavender-accent: #9d81cd;
  --color-brand-lavender-deep: #412b6b;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--color-brand-cream);
  color: var(--color-brand-charcoal);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}

/* Perspective utility for covers */
.perspective-1000 {
  perspective: 1000px;
}

/* Simple CSS slide down and fade in animations for dropdowns/modals */
.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

.animate-spin-slow {
  animation: spin 12s linear infinite;
}

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