@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700&family=Lexend+Deca:wght@500;600;700;800&display=swap');

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

@layer base {
    :root {
        --ink: #123341;
        --accent: #d99f5d;
        --mist: #f5efe4;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-[#f5efe4] text-slate-900 antialiased;
        font-family: 'Kumbh Sans', sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-display {
        font-family: 'Lexend Deca', sans-serif;
    }

    ::selection {
        background: rgba(217, 159, 93, 0.25);
    }
}

@layer components {
    .site-shell {
        @apply relative min-h-screen overflow-hidden;
        background:
            radial-gradient(circle at top left, rgba(217, 159, 93, 0.22), transparent 30%),
            radial-gradient(circle at 85% 20%, rgba(38, 129, 153, 0.18), transparent 26%),
            linear-gradient(180deg, #fbf7f0 0%, #f5efe4 48%, #efe6d8 100%);
    }

    .site-orb {
        @apply pointer-events-none absolute rounded-full blur-3xl;
    }

    .site-orb-a {
        @apply left-[-8rem] top-[8rem] h-72 w-72 bg-amber-200/40;
    }

    .site-orb-b {
        @apply right-[-6rem] top-[18rem] h-80 w-80 bg-cyan-200/30;
    }

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

    .site-header {
        @apply sticky top-0 z-40 pt-5;
    }

    .nav-shell {
        @apply flex items-center justify-between gap-4 rounded-full border border-white/60 bg-white/75 px-4 py-3 shadow-[0_12px_40px_rgba(18,51,65,0.08)] backdrop-blur-lg;
    }

    .site-header.is-scrolled .nav-shell {
        @apply shadow-[0_18px_45px_rgba(18,51,65,0.14)];
    }

    .brand-mark {
        @apply inline-flex items-center gap-3 text-slate-900;
    }

    .brand-monogram {
        @apply inline-flex h-11 w-11 items-center justify-center rounded-full bg-slate-900 text-sm font-bold text-white;
    }

    .brand-title {
        @apply block text-sm font-semibold uppercase tracking-[0.24em];
    }

    .brand-subtitle {
        @apply block text-xs text-slate-500;
    }

    .nav-links,
    .nav-actions {
        @apply items-center gap-5;
    }

    .nav-link {
        @apply text-sm font-medium text-slate-600 transition hover:text-slate-900;
    }

    .nav-link.is-active {
        @apply text-slate-900;
    }

    .nav-toggle {
        @apply inline-flex flex-col gap-1 rounded-full border border-slate-200 bg-white/90 p-3 lg:hidden;
    }

    .nav-toggle span {
        @apply block h-0.5 w-5 rounded-full bg-slate-900;
    }

    .mobile-menu {
        @apply mt-3 rounded-[28px] border border-white/60 bg-white/80 p-4 shadow-[0_18px_45px_rgba(18,51,65,0.08)] backdrop-blur-lg lg:hidden;
    }

    .mobile-link {
        @apply block rounded-2xl px-3 py-3 text-sm font-medium text-slate-700 transition hover:bg-slate-100;
    }

    .panel {
        @apply rounded-[30px] border border-white/70 bg-white/80 shadow-[0_20px_60px_rgba(18,51,65,0.10)] backdrop-blur-lg;
    }

    .panel-soft {
        @apply rounded-[24px] border border-slate-200/70 bg-white/70;
    }

    .section-kicker {
        @apply text-xs font-semibold uppercase tracking-[0.3em] text-cyan-700;
    }

    .hero-grid {
        @apply grid gap-6 lg:grid-cols-[1.2fr_0.8fr];
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-full bg-slate-900 px-6 py-3 text-sm font-semibold text-white transition duration-200 hover:-translate-y-0.5 hover:bg-cyan-800;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-full border border-slate-300 bg-white/90 px-6 py-3 text-sm font-semibold text-slate-900 transition duration-200 hover:-translate-y-0.5 hover:border-cyan-700 hover:text-cyan-800;
    }

    .btn-sm {
        @apply px-4 py-2 text-xs;
    }

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

    .label {
        @apply text-sm font-semibold text-slate-700;
    }

    .helper {
        @apply mt-2 text-xs text-slate-500;
    }

    .error-list {
        @apply rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700;
    }

    .flash-banner {
        @apply rounded-2xl px-4 py-3 text-sm font-medium;
    }

    .flash-success {
        @apply border border-emerald-200 bg-emerald-50 text-emerald-700;
    }

    .flash-error {
        @apply border border-rose-200 bg-rose-50 text-rose-700;
    }

    .metric-card {
        @apply panel p-6;
    }

    .metric-value {
        @apply mt-3 text-4xl font-extrabold text-slate-900;
    }

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

    .status-pending {
        @apply bg-amber-100 text-amber-700;
    }

    .status-submitted {
        @apply bg-cyan-100 text-cyan-700;
    }

    .status-paid {
        @apply bg-emerald-100 text-emerald-700;
    }

    .status-unpaid {
        @apply bg-slate-100 text-slate-700;
    }

    .calendar-grid {
        @apply grid grid-cols-7 gap-3;
    }

    .calendar-day {
        @apply min-h-[140px] rounded-[22px] border border-slate-200 bg-white/80 p-3 shadow-sm;
    }

    .calendar-day.is-muted {
        @apply opacity-45;
    }

    .calendar-day.is-today {
        @apply border-cyan-700 ring-2 ring-cyan-100;
    }

    .footer-shell {
        @apply panel mb-8 mt-10 grid gap-6 px-6 py-8 lg:grid-cols-[1.4fr_0.6fr];
    }

    .footer-title {
        @apply mt-2 text-2xl font-bold text-slate-900;
    }

    .footer-copy {
        @apply mt-3 max-w-2xl text-sm leading-7 text-slate-600;
    }

    .footer-meta {
        @apply space-y-2 text-sm text-slate-600;
    }

    [data-reveal] {
        @apply translate-y-4 opacity-0 transition duration-700 ease-out;
    }

    [data-reveal].is-visible {
        @apply translate-y-0 opacity-100;
    }
}