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

@layer base {
    :root {
        --surface-0: 248 250 252;
        --surface-1: 255 255 255;
        --surface-2: 226 232 240;
        --ink-1: 15 23 42;
        --ink-2: 71 85 105;
        --ink-3: 100 116 139;
        --brand-primary: 17 94 89;
        --brand-secondary: 14 116 144;
        --brand-accent: 6 78 59;
    }

    html {
        color-scheme: light;
        scroll-behavior: smooth;
    }

    html.dark {
        color-scheme: dark;
    }

    [x-cloak] {
        display: none !important;
    }

    body {
        @apply bg-slate-50 text-slate-900 antialiased;
        background-image:
            radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 32%),
            radial-gradient(circle at top right, rgba(14, 116, 144, 0.08), transparent 28%),
            linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,1));
    }

    .dark body {
        @apply bg-slate-950 text-slate-100;
        background-image:
            radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 28%),
            radial-gradient(circle at top right, rgba(14, 116, 144, 0.14), transparent 24%),
            linear-gradient(180deg, rgba(2,6,23,1), rgba(2,6,23,1));
    }
}

@layer components {
    .site-shell {
        @apply min-h-screen;
    }

    .container-shell {
        @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
    }

    .section-gap {
        @apply py-16 sm:py-20 lg:py-24;
    }

    .glass-panel {
        @apply rounded-[28px] border border-white/60 bg-white/85 shadow-[0_24px_80px_rgba(15,23,42,0.08)] backdrop-blur;
    }

    .dark .glass-panel {
        @apply border-white/10 bg-slate-900/75 shadow-[0_24px_80px_rgba(2,6,23,0.55)];
    }

    .eyebrow {
        @apply inline-flex items-center gap-2 rounded-full border border-teal-200/80 bg-teal-50/90 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-teal-800;
    }

    .dark .eyebrow {
        @apply border-teal-800/60 bg-teal-950/40 text-teal-200;
    }

    .headline-display {
        @apply text-4xl font-semibold leading-[1.02] tracking-[-0.04em] text-slate-950 sm:text-5xl lg:text-7xl;
    }

    .dark .headline-display {
        @apply text-white;
    }

    .body-lg {
        @apply text-base leading-8 text-slate-600 sm:text-lg;
    }

    .dark .body-lg {
        @apply text-slate-300;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-full bg-teal-700 px-5 py-3 text-sm font-semibold text-white transition hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-800 transition hover:border-slate-400 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-2;
    }

    .dark .btn-secondary {
        @apply border-slate-700 bg-slate-900 text-slate-100 hover:border-slate-600 hover:bg-slate-800;
    }

    .premium-card {
        @apply rounded-[24px] border border-slate-200/80 bg-white/85 p-6 shadow-[0_18px_45px_rgba(15,23,42,0.06)] transition duration-300;
    }

    .premium-card:hover {
        transform: translateY(-4px);
    }

    .dark .premium-card {
        @apply border-slate-800 bg-slate-900/85;
    }

    .mesh-banner {
        background:
            radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.18), transparent 30%),
            radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.18), transparent 34%),
            linear-gradient(135deg, rgba(255,255,255,0.88), rgba(240,253,250,0.94));
    }

    .dark .mesh-banner {
        background:
            radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.16), transparent 28%),
            radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.14), transparent 32%),
            linear-gradient(135deg, rgba(15,23,42,0.94), rgba(2,6,23,0.98));
    }

    .section-heading h3 {
        @apply mt-4 text-3xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white;
    }

    .section-heading p {
        @apply mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300;
    }

    .field-shell {
        @apply block w-full rounded-[18px] border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20 dark:border-slate-700 dark:bg-slate-950 dark:text-white dark:placeholder:text-slate-500;
    }

    .field-error {
        @apply mt-2 text-sm text-rose-600 dark:text-rose-300;
    }

    .soft-divider {
        @apply border-t border-slate-200 dark:border-slate-800;
    }

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

    .choice-card {
        @apply rounded-[22px] border border-slate-200 bg-white px-4 py-4 transition hover:border-slate-300 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700;
    }

    [data-map-placeholder].is-ready {
        @apply opacity-100;
    }
}