@import 'tailwindcss';

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

@theme {
    --font-sans: 'Raleway', ui-sans-serif, system-ui, sans-serif;
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;

    /* Warm neutrals — page + section backgrounds */
    --color-cream-50: #fdfbf7;
    --color-cream-100: #f8f3ea;
    --color-cream-200: #f1e8d9;
    --color-sand-200: #e9dfcf;
    --color-sand-300: #d9cbb4;

    /* Ink — text */
    --color-ink-900: #12283a;
    --color-ink-700: #2d4558;
    --color-ink-500: #506a7f;
    --color-ink-400: #809bb0;

    /* Brand Primary Color (#186297) */
    --color-moss-50: #f0f7fc;
    --color-moss-100: #e0eff9;
    --color-moss-300: #7cc5eb;
    --color-moss-500: #186297;
    --color-moss-600: #145380;
    --color-moss-700: #186297;
    --color-moss-800: #10456c;

    /* Terra — sale / badges */
    --color-terra-100: #f8e5da;
    --color-terra-500: #c0703f;
    --color-terra-600: #a75c30;

    /* Blush — soft peach accents */
    --color-blush-100: #f7e8dd;
    --color-blush-200: #f0d8c8;

    /* Gold — star ratings */
    --color-gold-500: #d9a441;

    --shadow-soft: 0 2px 16px rgb(24 98 151 / 0.08);
    --shadow-lift: 0 10px 30px rgb(24 98 151 / 0.12);
}

@layer base {
    html {
        scroll-behavior: smooth;
    }
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
    body {
        @apply bg-white font-sans text-ink-900 antialiased;
    }
    ::selection {
        @apply bg-moss-100 text-moss-800;
    }
}

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

    .btn-primary {
        @apply inline-flex cursor-pointer items-center justify-center gap-2 bg-moss-700 px-7 py-3.5 text-xs font-semibold tracking-[0.18em] text-white uppercase transition-colors duration-200 hover:bg-moss-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss-700;
    }
    .btn-outline {
        @apply inline-flex cursor-pointer items-center justify-center gap-2 border border-ink-900 bg-transparent px-7 py-3.5 text-xs font-semibold tracking-[0.18em] text-ink-900 uppercase transition-colors duration-200 hover:bg-ink-900 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink-900;
    }
    .btn-light {
        @apply inline-flex cursor-pointer items-center justify-center gap-2 bg-white px-7 py-3.5 text-xs font-semibold tracking-[0.18em] text-ink-900 uppercase transition-colors duration-200 hover:bg-cream-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white;
    }

    .field-label {
        @apply mb-1.5 block text-xs font-semibold tracking-wider text-ink-700 uppercase;
    }
    .field-input {
        @apply w-full border border-sand-300 bg-white px-4 py-3 text-sm text-ink-900 placeholder:text-ink-400 focus:border-moss-600 focus:ring-1 focus:ring-moss-600 focus:outline-none;
    }

    .nav-link {
        @apply relative py-2 text-[13px] font-medium tracking-[0.14em] text-ink-900 uppercase transition-colors duration-200 hover:text-moss-600;
    }
    .nav-link::after {
        content: '';
        @apply absolute bottom-0 left-0 h-px w-0 bg-moss-600 transition-all duration-300;
    }
    .nav-link:hover::after {
        @apply w-full;
    }

    .section-title {
        @apply font-serif text-2xl font-medium text-ink-900 sm:text-3xl lg:text-4xl;
    }
    .eyebrow {
        @apply text-[11px] font-semibold tracking-[0.28em] text-terra-500 uppercase;
    }

    .prose-shop p {
        @apply mb-5 leading-relaxed text-ink-700;
    }
    .prose-shop h2 {
        @apply mt-10 mb-4 font-serif text-2xl font-medium text-ink-900;
    }
    .prose-shop ul {
        @apply mb-5 list-disc space-y-2 pl-5 text-ink-700;
    }
}