:root {
    /* Colors - "Refined Utility" Surface Architecture */
    --surface: #f9f9f7;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f4f4f2;
    --surface-container: #eeeeec;
    --surface-container-high: #e8e8e6;
    --surface-container-highest: #e2e3e1;

    /* Action Colors */
    --primary: #af101a;
    --primary-container: #d32f2f;
    --on-primary: #ffffff;
    --secondary: #595f62;
    --secondary-container: #dbe0e4;
    --on-secondary-container: #5d6367;
    --tertiary: #005f7b;
    --error: #ba1a1a;

    /* Typography - "The Workshop Manual" */
    --font-headline: 'Work Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
    --on-surface: #1a1c1b;
    --on-surface-variant: #5b403d;

    /* Transitions */
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: var(--font-headline);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

h2 {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    letter-spacing: -0.05em;
    line-height: 0.9;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-smooth);
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   Animations (Scroll Reveal)
   ========================================================================== */
.reveal-up, .reveal-zoom {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up {
    transform: translateY(30px);
}

.reveal-zoom {
    transform: scale(1.1);
}

.reveal-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Delay classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ==========================================================================
   Custom Components (Non-Tailwind)
   ========================================================================== */

/* FAQ Accordion Transitions */
.faq-answer {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure material symbols look solid when filled */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Booking Modal Scale Logic */
#bookingModal.opacity-100 .bg-white {
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#bookingModal {
    transition: opacity 0.3s ease;
}

/* Bottom Nav Safe Area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    nav.fixed.bottom-0 {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
}