/* Tonneau Cover — atelier template (UK pickup / automotive palette) */

:root {
    --background: #f4f6f8;
    --foreground: #0f172a;
    --primary: #0f172a;
    --primary-foreground: #f8fafc;
    --secondary: #e2e8f0;
    --secondary-foreground: #0f172a;
    --accent: #ea580c;
    --accent-foreground: #ffffff;
    --muted-foreground: #64748b;
    --border: #cbd5e1;
    --input: #cbd5e1;
    --ring: #ea580c;
    --clay: #a67c52;
    --cream: #f5f0e8;
    --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(245, 240, 232, 0.75); }
    .text-cream\/90 { color: rgba(245, 240, 232, 0.9); }
    .bg-background\/50 { background-color: rgba(244, 246, 248, 0.5); }
    .bg-background\/70 { background-color: rgba(244, 246, 248, 0.7); }
    .bg-background\/94 { background-color: rgba(244, 246, 248, 0.94); }
    .text-foreground\/80 { color: rgba(15, 23, 42, 0.8); }
    .text-foreground\/90 { color: rgba(15, 23, 42, 0.9); }
    .border-border\/60 { border-color: rgba(203, 213, 225, 0.6); }
    .bg-secondary\/40 { background-color: rgba(226, 232, 240, 0.4); }
    .bg-primary\/80 { background-color: rgba(15, 23, 42, 0.8); }
    .bg-primary\/55 { background-color: rgba(15, 23, 42, 0.55); }
    .bg-primary\/20 { background-color: rgba(15, 23, 42, 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(244, 246, 248, 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(15, 23, 42, 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 #ea580c;
    outline-offset: 2px;
}

details summary {
    list-style: none;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .img-zoom img,
    .hover-lift {
        transition: none;
    }

    .img-zoom:hover img {
        transform: none;
    }
}