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

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

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

    button,
    a,
    input,
    select,
    textarea {
        @apply transition duration-200;
    }

    input,
    select,
    textarea {
        @apply focus:border-salon-500 focus:ring-salon-500;
    }

    ::selection {
        @apply bg-salon-200 text-salon-950;
    }
}

@layer components {
    .salon-card {
        @apply rounded-3xl border border-slate-200 bg-white shadow-card;
    }

    .salon-card-hover {
        @apply salon-card transition duration-300 hover:-translate-y-0.5 hover:shadow-floating;
    }

    .salon-button-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl bg-salon-600 px-5 py-3 text-sm font-semibold text-white shadow-sm hover:bg-salon-700 focus:outline-none focus:ring-2 focus:ring-salon-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .salon-button-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-700 shadow-sm hover:border-salon-200 hover:bg-salon-50 hover:text-salon-700 focus:outline-none focus:ring-2 focus:ring-salon-500 focus:ring-offset-2;
    }

    .salon-label {
        @apply mb-2 block text-sm font-semibold text-slate-700;
    }

    .salon-input {
        @apply block w-full rounded-2xl border-slate-300 bg-white text-slate-800 shadow-sm placeholder:text-slate-400 focus:border-salon-500 focus:ring-salon-500;
    }

    .salon-badge {
        @apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
    }

    .salon-page-container {
        @apply mx-auto w-full max-w-[1600px] px-4 sm:px-6 lg:px-8;
    }
}

@layer utilities {
    .salon-gradient {
        background:
            radial-gradient(circle at top left, rgba(236, 72, 153, 0.16), transparent 32%),
            radial-gradient(circle at bottom right, rgba(147, 51, 234, 0.18), transparent 36%),
            linear-gradient(135deg, #faf5ff 0%, #ffffff 48%, #fdf2f8 100%);
    }

    .salon-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .salon-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .salon-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .salon-scrollbar::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: #cbd5e1;
    }
}