/* =====================================================================
   GLOBAL DESIGN TOKENS & BASE STYLES
   ---------------------------------------------------------------------
   Defines project-wide variables, resets, typography and foundational
   utilities that every page and component can rely on.
   ===================================================================== */

:root {
    /* Color palette */
    --primary-color: #d4a574;
    --primary-color-dark: #b88657;
    --secondary-color: #8b4513;
    --accent-color: #f4e4c1;
    --dark-color: #2c1810;
    --light-color: #f8f9fa;
    --text-dark: #333333;
    --text-light: #666666;
    --border-color: #e9ecef;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;

    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Spacing scale */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    --section-padding-y: 80px;

    /* Radius & shadows */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.18);

    /* Motion */
    --transition: all 0.3s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-dark);
    background-color: #ffffff;
    overflow-x: hidden;
    padding: 0;
}

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

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

section {
    padding: var(--section-padding-y) 0;
}

@media (max-width: 768px) {
    section {
        padding: calc(var(--section-padding-y) * 0.6) 0;
    }
}

/* =====================================================================
   BOOTSTRAP OVERRIDES (GLOBAL)
   ===================================================================== */

body .bg-primary,
html body .bg-primary,
section.bg-primary,
.py-5.bg-primary,
#reservation.bg-primary,
#avis.bg-primary,
#gallery.bg-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}


/* =====================================================================
   ACCESSIBILITY UTILITIES
   ===================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.visually-hidden:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* =====================================================================
   UTILITY HELPERS
   ===================================================================== */

.text-shadow-soft {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

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

.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #ffffff;
}

.text-primary-strong { color: var(--secondary-color) !important; }

/* Ensure confirmation modal overlays the cart sidebar properly */
.modal { z-index: 11000 !important; }
.modal-backdrop { z-index: 10990 !important; }

/* Cart sidebar styles are now in components/cart.css */

@media (max-width: 768px) {
    body {
        padding-top: 62px;
    }
}
/* Global Bootstrap primary override */
body .bg-primary,
html body .bg-primary,
section.bg-primary,
.py-5.bg-primary,
#reservation.bg-primary,
#avis.bg-primary,
#gallery.bg-primary {
    background: linear-gradient(135deg, #d4a574, #8b4513) !important;
    background-color: #d4a574 !important;
    background-image: linear-gradient(135deg, #d4a574, #8b4513) !important;
}

/* Cart Sidebar styles moved to components/cart.css */

/* Accessibility: Visually hidden content for screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ensure visually hidden content is accessible to screen readers */
.visually-hidden:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Cart sidebar responsive styles moved to components/cart.css */