@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&family=Poppins:wght@600&display=swap');

:root {
  /* Colors — from brand manifest */
  --color-primary: #3366CC;
  --color-secondary: #665E7A;
  --color-accent: #4DC0F0;
  --color-background: #252525;
  --color-text: #F5F5F5;

  /* Typography — from brand manifest */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-heading-weight: 600;
  --font-body-weight: 400;
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide-in {
  animation: fade-slide-in 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.shadow-o42 {
  box-shadow: 0px 6px 20px rgba(51, 102, 204, 0.25);
}

.text-gradient-primary-secondary {
  background-image: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-accent-primary {
  background-image: linear-gradient(to top right, var(--color-accent), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}