@import '@fontsource-variable/outfit';
@import '@fontsource-variable/fraunces';

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

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-mist font-sans text-navy-800 antialiased;
    }

    ::selection {
        @apply bg-turquoise-500/25 text-navy-900;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold tracking-wide transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
    }

    .btn-primary {
        @apply btn bg-emerald-500 text-white shadow-soft hover:bg-emerald-600 focus-visible:outline-emerald-500;
    }

    .btn-secondary {
        @apply btn border border-white/35 bg-white/10 text-white backdrop-blur hover:bg-white/20 focus-visible:outline-white;
    }

    .btn-ghost {
        @apply btn border border-navy-200 bg-white text-navy-800 hover:border-emerald-500 hover:text-emerald-600 focus-visible:outline-emerald-500;
    }

    .btn-coral {
        @apply btn bg-coral-500 text-white hover:bg-coral-600 focus-visible:outline-coral-500;
    }

    .field {
        @apply block w-full rounded-xl border-navy-200 bg-white px-4 py-3 text-navy-800 shadow-sm focus:border-emerald-500 focus:ring-emerald-500;
    }

    .label {
        @apply mb-1.5 block text-sm font-medium text-navy-700;
    }

    .section-kicker {
        @apply text-xs font-semibold uppercase tracking-[0.22em] text-turquoise-600;
    }

    .section-title {
        @apply font-display text-3xl font-semibold tracking-tight text-navy-900 sm:text-4xl;
    }

    .surface {
        @apply rounded-2xl border border-navy-100 bg-white shadow-soft;
    }

    .status-pill {
        @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide;
    }

    .hero-wash {
        background:
            radial-gradient(ellipse 80% 60% at 85% 15%, rgba(22, 184, 166, 0.35), transparent 55%),
            radial-gradient(ellipse 55% 45% at 10% 80%, rgba(255, 209, 102, 0.22), transparent 50%),
            linear-gradient(145deg, #141B28 0%, #26324A 48%, #087F5B 100%);
    }

    .mesh-light {
        background-image:
            radial-gradient(circle at 12% 18%, rgba(22, 184, 166, 0.12), transparent 28%),
            radial-gradient(circle at 88% 12%, rgba(255, 209, 102, 0.16), transparent 26%),
            linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 55%, #F5F7FA 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}