@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  --font-heading: 'Space Grotesk', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
}

body {
  @apply bg-slate-50 text-slate-900 font-body antialiased;
}

@layer base {
  .font-heading {
    font-family: var(--font-heading);
  }
  .font-body {
    font-family: var(--font-body);
  }
}

@layer utilities {
  .shadow-card {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  }
  .shadow-floating {
    box-shadow: 0 14px 42px rgba(59, 130, 246, 0.18);
  }
}

.gradient-ring {
  background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.12), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(14, 165, 233, 0.12), transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(99, 102, 241, 0.1), transparent 30%);
}

.section-shell {
  @apply relative overflow-hidden rounded-3xl border border-slate-200 bg-white/95 backdrop-blur shadow-card;
}

.card-surface {
  @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-card transition duration-300;
}

.card-surface:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 12px 34px rgba(59, 130, 246, 0.16);
}

.badge {
  @apply inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-blue-700;
}

.fade-up {
  opacity: 0;
  animation: fade-up 0.9s ease forwards;
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}