@import url('https://fonts.cdnfonts.com/css/galeria');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,400&display=swap');

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem; /* Precise offset for fixed header navigation */
}

:root {
    --font-family-base: 'Galeria', 'Plus Jakarta Sans', sans-serif;
    --font-family-serif: 'Galeria', 'Playfair Display', serif;

    /* QUIET, MATTE & GLOW-FREE DARK THEME (ZERO NEON / ZERO SHIMMER) */
    --bg-page: #121316;
    --bg-card: #191a1e;
    --bg-card-hover: #202227;
    --bg-header: rgba(18, 19, 22, 0.95);
    --accent-primary: #b59a68;
    --accent-hover: #a08656;
    --accent-gold: #b59a68;
    --text-primary: #f4f4f6;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-card: none;
    --hero-right-bg: #16171b;
    --btn-outline-text: #f4f4f6;
    --btn-outline-border: rgba(255, 255, 255, 0.2);
    --btn-outline-hover-bg: #b59a68;
    --btn-outline-hover-text: #121316;

    /* FLAT MATTE BADGE & CTA (NO GLOW / NO SHIMMER) */
    --badge-open-bg: rgba(181, 154, 104, 0.1);
    --badge-open-border: rgba(181, 154, 104, 0.25);
    --badge-open-text: #cbb283;
    --btn-cta-bg: #b59a68;
    --btn-cta-text: #121316;
    --btn-cta-shadow: none;

    /* MOOD TAB BUTTONS DARK MODE */
    --mood-btn-bg: #191a1e;
    --mood-btn-border: rgba(255, 255, 255, 0.12);
    --mood-btn-text: #a1a1aa;
    --mood-btn-active-bg: #b59a68;
    --mood-btn-active-text: #121316;

    /* FOOTER DARK THEME */
    --footer-bg: #0d0e10;
    --footer-border: rgba(255, 255, 255, 0.07);
    --footer-title: #ffffff;
    --footer-body: #a1a1aa;
    --footer-muted: #71717a;
    --footer-accent: #b59a68;
    --footer-logo-filter: none;
}

[data-theme="light"] {
    /* RESTORED VIBRANT MODERN ROYAL BLUE LIGHT THEME */
    --bg-page: #f0f4f8;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-header: rgba(255, 255, 255, 0.95);
    --accent-primary: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-gold: #2563eb;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-card: none;
    --hero-right-bg: #f8fafc;
    --btn-outline-text: #0f172a;
    --btn-outline-border: #0f172a;
    --btn-outline-hover-bg: #0f172a;
    --btn-outline-hover-text: #ffffff;

    /* BADGE & CTA ROYAL BLUE LIGHT THEME */
    --badge-open-bg: rgba(37, 99, 235, 0.1);
    --badge-open-border: rgba(37, 99, 235, 0.3);
    --badge-open-text: #1d4ed8;
    --btn-cta-bg: #2563eb;
    --btn-cta-text: #ffffff;
    --btn-cta-shadow: none;

    /* MOOD TAB BUTTONS LIGHT MODE (ROYAL BLUE ACCENT) */
    --mood-btn-bg: #ffffff;
    --mood-btn-border: rgba(0, 0, 0, 0.12);
    --mood-btn-text: #475569;
    --mood-btn-active-bg: #2563eb;
    --mood-btn-active-text: #ffffff;

    /* FOOTER LIGHT THEME */
    --footer-bg: #ffffff;
    --footer-border: rgba(0, 0, 0, 0.08);
    --footer-title: #0f172a;
    --footer-body: #475569;
    --footer-muted: #64748b;
    --footer-accent: #2563eb;
    --footer-logo-filter: invert(1);
}

body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base) !important;
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Universal Semantic Helper Classes */
.theme-page-bg { background-color: var(--bg-page) !important; }
.theme-card-bg { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; }
.theme-header-bg { background-color: var(--bg-header) !important; border-color: var(--border-color) !important; }
.theme-hero-right-bg { background-color: var(--hero-right-bg) !important; }

/* Flat Matte Badge & CTA Button (No Shimmer / No Glow) */
.badge-open-now {
    background-color: var(--badge-open-bg) !important;
    border-color: var(--badge-open-border) !important;
    color: var(--badge-open-text) !important;
}

.btn-cta-menu {
    background: var(--btn-cta-bg) !important;
    color: var(--btn-cta-text) !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-cta-menu:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-2px);
}

/* Footer Semantic Theme Classes */
.theme-footer-bg { background-color: var(--footer-bg) !important; border-color: var(--footer-border) !important; }
.theme-footer-title { color: var(--footer-title) !important; }
.theme-footer-body { color: var(--footer-body) !important; }
.theme-footer-muted { color: var(--footer-muted) !important; }
.theme-footer-accent { color: var(--footer-accent) !important; }

.theme-text-title { color: var(--text-primary) !important; }
.theme-text-body { color: var(--text-secondary) !important; }
.theme-text-muted { color: var(--text-muted) !important; }
.theme-text-accent { color: var(--accent-primary) !important; }
.theme-text-gold { color: var(--accent-gold) !important; }
.theme-border { border-color: var(--border-color) !important; }

.theme-btn-outline {
    border-color: var(--btn-outline-border) !important;
    color: var(--btn-outline-text) !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}
.theme-btn-outline:hover {
    background-color: var(--btn-outline-hover-bg) !important;
    color: var(--btn-outline-hover-text) !important;
    border-color: var(--btn-outline-hover-bg) !important;
}

/* Nav Item Active State */
.nav-link-item {
    transition: all 0.2s ease;
}
.nav-link-item.active {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background-color: rgba(181, 154, 104, 0.08);
}
[data-theme="light"] .nav-link-item.active {
    background-color: rgba(37, 99, 235, 0.08);
}

/* Mood Selector Buttons - Theme Aware */
.mood-tab-btn {
    background-color: var(--mood-btn-bg) !important;
    border-color: var(--mood-btn-border) !important;
    color: var(--mood-btn-text) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mood-tab-btn:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}
.mood-tab-btn.active {
    background-color: var(--mood-btn-active-bg) !important;
    color: var(--mood-btn-active-text) !important;
    border-color: var(--mood-btn-active-bg) !important;
    font-weight: 800 !important;
}

/* Option 2: Story Ring Styling for Images */
.story-ring-wrap {
    position: relative;
    padding: 3px;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, rgba(181, 154, 104, 0.2) 100%);
    transition: transform 0.3s ease;
}
.story-ring-wrap:hover {
    transform: scale(1.04);
}

/* Option 3: Staggered Ingredient Badges on Hover */
.ingredient-badge {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.food-card-interactive:hover .ingredient-badge {
    opacity: 1;
    transform: translateY(0);
}
.food-card-interactive:hover .ingredient-badge:nth-child(1) { transition-delay: 0.05s; }
.food-card-interactive:hover .ingredient-badge:nth-child(2) { transition-delay: 0.12s; }
.food-card-interactive:hover .ingredient-badge:nth-child(3) { transition-delay: 0.19s; }

/* Rotating Ring */
@keyframes slowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotating-ring {
    animation: slowSpin 35s linear infinite;
}

/* Food Card Smooth Zoom & Title Slide Micro-Interaction */
.food-card-interactive {
    transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.food-card-interactive:hover {
    border-color: var(--accent-primary) !important;
    transform: translateY(-4px);
}
.food-card-interactive img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.food-card-interactive:hover img {
    transform: scale(1.08);
}
.food-card-interactive .card-title-slide {
    transition: transform 0.3s ease, color 0.3s ease;
}
.food-card-interactive:hover .card-title-slide {
    transform: translateX(4px);
    color: var(--accent-primary) !important;
}

/* Clean Scroll Reveal Observer Animation System (No Glows) */
[data-animate] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

[data-animate="fade-up"] {
    transform: translateY(25px);
}

[data-animate="fade-in"] {
    transform: scale(0.98);
}

[data-animate="slide-right"] {
    transform: translateX(-30px);
}

[data-animate="slide-left"] {
    transform: translateX(30px);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}