@import 'tailwindcss';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";

@theme {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
    --font-heading: 'Great Vibes', cursive;

    /* Primary — Espresso (from logo background) */
    --color-navy-50: #f6f3f1;
    --color-navy-100: #e8e0da;
    --color-navy-200: #d1c2b5;
    --color-navy-300: #ab9686;
    --color-navy-400: #8a7264;
    --color-navy-500: #6b5347;
    --color-navy-600: #503d34;
    --color-navy-700: #3c2d27;
    --color-navy-800: #271c18;
    --color-navy-900: #17100d;
    --color-navy-950: #0d0908;

    /* Secondary — Champagne Gold (from logo gradient highlights) */
    --color-sky-brand-50: #fdf8ef;
    --color-sky-brand-100: #f7ecd3;
    --color-sky-brand-200: #edd6a6;
    --color-sky-brand-300: #e0ba75;
    --color-sky-brand-400: #cf9c52;
    --color-sky-brand-500: #b8813c;
    --color-sky-brand-600: #97662e;
    --color-sky-brand-700: #785025;
    --color-sky-brand-800: #5c3d1e;
    --color-sky-brand-900: #402c16;
    --color-sky-brand-950: #241809;

    /* Accent — Rose Gold / Copper (from logo lettering) */
    --color-accent-50: #fbf3ea;
    --color-accent-100: #f3e0c9;
    --color-accent-200: #e6c49b;
    --color-accent-300: #d3aa7d;
    --color-accent-400: #c08f5c;
    --color-accent-500: #a9754a;
    --color-accent-600: #8f5f3b;
    --color-accent-700: #714a2e;
    --color-accent-800: #573a25;
    --color-accent-900: #402b1c;
    --color-accent-950: #241810;

    /* Neutral background */
    --color-surface: #faf8f6;
    --color-surface-muted: #f2ede8;

    --shadow-soft: 0 2px 8px 0 rgb(15 23 42 / 0.04), 0 8px 24px -4px rgb(15 23 42 / 0.08);
    --shadow-soft-lg: 0 4px 16px 0 rgb(15 23 42 / 0.06), 0 16px 40px -8px rgb(15 23 42 / 0.12);

    --animate-fade-up: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    --animate-fade-in: fade-in 0.6s ease-out both;
    --animate-marquee: marquee 32s linear infinite;

    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }
}

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

    body {
        @apply bg-surface text-navy-900 antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
    }

    ::selection {
        @apply bg-accent-500/20 text-navy-900;
    }
}

@utility btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;
}

@layer components {
    .shadow-soft {
        box-shadow: var(--shadow-soft);
    }

    .shadow-soft-lg {
        box-shadow: var(--shadow-soft-lg);
    }

    .glass {
        @apply bg-white/70 backdrop-blur-xl backdrop-saturate-150 border border-white/40;
    }

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

    .btn-primary {
        @apply btn bg-accent-500 text-white shadow-soft hover:bg-accent-600 hover:-translate-y-0.5 hover:shadow-soft-lg focus-visible:ring-accent-500;
    }

    .btn-secondary {
        @apply btn bg-navy-800 text-white shadow-soft hover:bg-navy-700 hover:-translate-y-0.5 hover:shadow-soft-lg focus-visible:ring-navy-700;
    }

    .btn-outline {
        @apply btn border-2 border-white/30 bg-white/5 text-white backdrop-blur hover:bg-white/15 focus-visible:ring-white;
    }

    .btn-outline-navy {
        @apply btn border-2 border-navy-200 bg-white text-navy-800 hover:border-navy-700 hover:bg-navy-800 hover:text-white focus-visible:ring-navy-700;
    }

    .card {
        @apply rounded-2xl border border-navy-100/70 bg-white shadow-soft transition-shadow duration-300 hover:shadow-soft-lg;
    }

    .section-eyebrow {
        @apply inline-flex items-center gap-2 rounded-full bg-accent-50 px-4 py-1.5 text-xs font-bold tracking-widest text-accent-600 uppercase;
    }

    .reveal {
        opacity: 0;
    }

    .reveal.is-visible {
        animation: var(--animate-fade-up);
    }
}