/* Mabett — atelier template (Ford Bronco / Maverick accessories palette) */

:root {
    --background: #f3f4f6;
    --foreground: #111827;
    --primary: #1f2937;
    --primary-foreground: #f9fafb;
    --secondary: #e5e7eb;
    --secondary-foreground: #111827;
    --accent: #d97706;
    --accent-foreground: #ffffff;
    --muted-foreground: #6b7280;
    --border: #d1d5db;
    --input: #d1d5db;
    --ring: #d97706;
    --clay: #92400e;
    --cream: #faf7f2;
    --radius: 0.5rem;
}

@layer utilities {
    .bg-background { background-color: var(--background); }
    .text-foreground { color: var(--foreground); }
    .bg-primary { background-color: var(--primary); }
    .text-primary-foreground { color: var(--primary-foreground); }
    .bg-secondary { background-color: var(--secondary); }
    .text-secondary-foreground { color: var(--secondary-foreground); }
    .bg-accent { background-color: var(--accent); }
    .text-accent { color: var(--accent); }
    .text-accent-foreground { color: var(--accent-foreground); }
    .text-muted-foreground { color: var(--muted-foreground); }
    .border-border { border-color: var(--border); }
    .bg-input { background-color: var(--input); }
    .ring-ring { --tw-ring-color: var(--ring); }
    .bg-clay { background-color: var(--clay); }
    .text-clay { color: var(--clay); }
    .bg-cream { background-color: var(--cream); }
    .text-cream { color: var(--cream); }
    .text-cream\/75 { color: rgba(250, 247, 242, 0.75); }
    .text-cream\/80 { color: rgba(250, 247, 242, 0.8); }
    .text-cream\/90 { color: rgba(250, 247, 242, 0.9); }
    .text-cream\/95 { color: rgba(250, 247, 242, 0.95); }
    .bg-background\/50 { background-color: rgba(243, 244, 246, 0.5); }
    .bg-background\/70 { background-color: rgba(243, 244, 246, 0.7); }
    .bg-background\/94 { background-color: rgba(243, 244, 246, 0.94); }
    .text-foreground\/70 { color: rgba(17, 24, 39, 0.7); }
    .text-foreground\/80 { color: rgba(17, 24, 39, 0.8); }
    .text-foreground\/90 { color: rgba(17, 24, 39, 0.9); }
    .border-border\/60 { border-color: rgba(209, 213, 219, 0.6); }
    .border-border\/80 { border-color: rgba(209, 213, 219, 0.8); }
    .bg-secondary\/40 { background-color: rgba(229, 231, 235, 0.4); }
    .bg-primary\/80 { background-color: rgba(31, 41, 55, 0.8); }
    .bg-primary\/55 { background-color: rgba(31, 41, 55, 0.55); }
    .bg-primary\/50 { background-color: rgba(31, 41, 55, 0.5); }
    .bg-primary\/20 { background-color: rgba(31, 41, 55, 0.2); }
    .bg-accent\/10 { background-color: rgba(217, 119, 6, 0.1); }
    .bg-accent\/\[0\.06\] { background-color: rgba(217, 119, 6, 0.06); }
    .hover\:border-accent\/35:hover { border-color: rgba(217, 119, 6, 0.35); }
    .hover\:border-accent\/40:hover { border-color: rgba(217, 119, 6, 0.4); }
    .from-primary\/80 { --tw-gradient-from: rgba(31, 41, 55, 0.8); }
    .via-primary\/50 { --tw-gradient-via: rgba(31, 41, 55, 0.5); }
    .to-primary\/20 { --tw-gradient-to: rgba(31, 41, 55, 0.2); }
}

body {
    font-family: 'Open Sans', 'Roboto', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', 'Open Sans', ui-sans-serif, system-ui, sans-serif;
}

h1.font-display { font-weight: 900; }
h2, h3, h4, h5, h6 { font-weight: 800; }

.font-display {
    font-family: 'Roboto', 'Open Sans', ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
}

.font-display.font-bold,
h2.font-bold,
h3.font-bold { font-weight: 800; }

html { scroll-behavior: smooth; }

#header.scrolled {
    background-color: rgba(243, 244, 246, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
}

#mobile-menu {
    transition: opacity 0.25s ease-out, max-height 0.3s ease-out;
}

.img-zoom img {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.32, 1);
}

.img-zoom:hover img { transform: scale(1.04); }

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -24px rgba(17, 24, 39, 0.35);
}

.hide-scrollbar { scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 2px;
}

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

.footer-affiliate-disclaimer {
    color: #111827;
    background-color: #e5e7eb;
    border: 1px solid #9ca3af;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.footer-affiliate-disclaimer strong {
    color: #0f172a;
    font-weight: 700;
}

.inner-hero__cta {
    margin-top: 2rem;
}

.amazon-product-card {
    box-shadow: 0 12px 32px -24px rgba(17, 24, 39, 0.28);
}

.amazon-product-card:hover {
    border-color: rgba(217, 119, 6, 0.35);
}

.amazon-product-card__media img {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.32, 1);
}

.amazon-product-card:hover .amazon-product-card__media img {
    transform: scale(1.03);
}

.amazon-product-card__cta:focus-visible {
    outline: 2px solid #d97706;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .img-zoom img, .hover-lift { transition: none; }
    .img-zoom:hover img { transform: none; }
}