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

@layer base {
    :root {
        --page-bg: #f4efe6;
        --card-bg: rgba(255, 255, 255, 0.82);
        --card-border: rgba(15, 23, 42, 0.08);
        --ink: #172033;
    }

    body {
        background:
            radial-gradient(circle at top left, rgba(15, 118, 110, 0.17), transparent 28%),
            radial-gradient(circle at top right, rgba(217, 119, 6, 0.12), transparent 24%),
            linear-gradient(180deg, #f8f5ef 0%, var(--page-bg) 100%);
        color: var(--ink);
    }

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

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

    .app-frame {
        @apply mx-auto w-full max-w-6xl px-4 pb-8 pt-6 sm:px-6 lg:px-8;
    }

    .glass-card {
        @apply rounded-[28px] border p-5 shadow-[0_18px_60px_rgba(23,32,51,0.08)] backdrop-blur;
        background: var(--card-bg);
        border-color: var(--card-border);
    }

    .section-title {
        @apply font-semibold tracking-tight text-slate-900;
        font-family: "Space Grotesk", sans-serif;
    }

    .eyebrow {
        @apply text-xs font-semibold uppercase tracking-[0.24em] text-slate-500;
    }

    .pill-link {
        @apply inline-flex items-center rounded-full px-4 py-2 text-sm font-medium transition;
    }

    .pill-link-active {
        @apply bg-slate-900 text-white shadow-lg shadow-slate-900/10;
    }

    .pill-link-idle {
        @apply bg-white/70 text-slate-700 hover:bg-white;
    }

    .stat-tile {
        @apply rounded-[24px] border border-white/70 bg-white/85 p-4 shadow-sm;
    }

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

    .field-input {
        @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-100;
    }

    .primary-action {
        @apply inline-flex items-center justify-center rounded-2xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-800;
    }

    .secondary-action {
        @apply inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50;
    }

    .pull-refresh-indicator {
        @apply pointer-events-none fixed inset-x-0 top-3 z-50 flex justify-center opacity-0 transition-all duration-200;
        transform: translateY(-120%);
    }

    .pull-refresh-indicator.is-visible {
        @apply opacity-100;
        transform: translateY(0);
    }

    .pull-refresh-pill {
        @apply inline-flex items-center gap-2 rounded-full border border-white/80 bg-white/95 px-4 py-2 text-sm font-semibold text-slate-700 shadow-lg shadow-slate-900/10 backdrop-blur;
    }

    .pull-refresh-spinner {
        @apply h-4 w-4 rounded-full border-2 border-slate-300 border-t-slate-900;
        animation: spin 0.9s linear infinite;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}