/* assets/css/style.css - Maison Brume Paris Luxury Design System */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Maison Brume Paris Color Palette */
    --color-espresso: #2A1E16;
    --color-espresso-deep: #1F150E;
    --color-mocha: #4B362B;
    --color-creme: #E9DED3;
    --color-creme-light: #F4EBE1;
    --color-rose-clay: #BD8A7F;
    --color-rose-clay-dark: #9E6C62;
    --color-champagne: #DCC4AE;
    --color-champagne-light: #ECE0D1;
    --color-pearl: #F6F1EC;
    --color-sage: #8A9A86;
    
    /* Semantic Variables */
    --bg-espresso: #2A1E16;
    --bg-creme: #F6F1EC;
    --text-on-espresso: #F6F1EC;
    --text-on-creme: #2A1E16;
    --text-muted-espresso: #DCC4AE;
    --text-muted-creme: #6B5B52;
    --border-light: rgba(220, 196, 174, 0.25);
    --border-dark: rgba(75, 54, 43, 0.2);
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-pearl);
    color: var(--color-espresso);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Typography
   ========================================================================== */
.font-serif-luxury {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.015em;
}

.font-mono-code {
    font-family: 'JetBrains Mono', monospace;
}

.font-body {
    font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   Background Utilities & Ambient Glows
   ========================================================================== */
.bg-espresso {
    background-color: var(--color-espresso);
    color: var(--color-pearl);
}

.bg-mocha {
    background-color: var(--color-mocha);
    color: var(--color-pearl);
}

.bg-creme {
    background-color: var(--color-creme);
    color: var(--color-espresso);
}

.bg-pearl {
    background-color: var(--color-pearl);
    color: var(--color-espresso);
}

.bg-rose-clay {
    background-color: var(--color-rose-clay);
    color: var(--color-pearl);
}

.bg-champagne {
    background-color: var(--color-champagne);
    color: var(--color-espresso);
}

.text-rose-clay {
    color: var(--color-rose-clay);
}

.text-champagne {
    color: var(--color-champagne);
}

.text-mocha {
    color: var(--color-mocha);
}

.text-espresso {
    color: var(--color-espresso);
}

.border-champagne {
    border-color: rgba(220, 196, 174, 0.4);
}

.border-mocha {
    border-color: rgba(75, 54, 43, 0.3);
}

/* Subtle Champagne & Amber Ambient Glows */
.ambient-glow-champagne {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(220, 196, 174, 0.35) 0%, rgba(189, 138, 127, 0.15) 45%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.ambient-glow-espresso {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(189, 138, 127, 0.12) 0%, rgba(75, 54, 43, 0.2) 50%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Arch Frames & Organic Section Shapes
   ========================================================================== */
.arch-frame {
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.arch-pill {
    border-radius: 9999px;
}

.wave-divider-espresso {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave-divider-espresso svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

@media (min-width: 768px) {
    .wave-divider-espresso svg {
        height: 110px;
    }
}

/* ==========================================================================
   Luxury Cards (Design System Specification)
   ========================================================================== */

/* Dark Espresso Luxury Card */
.card-espresso {
    background-color: #2A1E16;
    color: #F6F1EC;
    border: 1px solid rgba(220, 196, 174, 0.18);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-espresso:hover {
    border-color: rgba(220, 196, 174, 0.4);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 196, 174, 0.12);
    transform: translateY(-3px);
}

/* Light Creme Luxury Card */
.card-creme {
    background-color: #E9DED3;
    color: #2A1E16;
    border: 1px solid rgba(75, 54, 43, 0.12);
    box-shadow: 0 10px 30px -10px rgba(75, 54, 43, 0.08);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-creme:hover {
    border-color: rgba(75, 54, 43, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 18px 35px -10px rgba(75, 54, 43, 0.15);
}

/* Rose Clay Card */
.card-rose-clay {
    background-color: #BD8A7F;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 35px -10px rgba(189, 138, 127, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-rose-clay:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px -10px rgba(189, 138, 127, 0.55);
}

/* Translucent Glass Panel (Espresso & Creme) */
.glass-panel-dark {
    background: rgba(42, 30, 22, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(220, 196, 174, 0.16);
}

.glass-panel-light {
    background: rgba(246, 241, 236, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(75, 54, 43, 0.12);
}

/* ==========================================================================
   Buttons (Maison Brume Design System)
   ========================================================================== */
.btn-espresso {
    background-color: #2A1E16;
    color: #F6F1EC;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-espresso:hover {
    background-color: #4B362B;
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(42, 30, 22, 0.3);
}

.btn-rose-clay {
    background-color: #BD8A7F;
    color: #FFFFFF;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-rose-clay:hover {
    background-color: #9E6C62;
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(189, 138, 127, 0.4);
}

.btn-ghost-creme {
    background-color: transparent;
    color: #2A1E16;
    border: 1.5px solid #2A1E16;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-ghost-creme:hover {
    background-color: rgba(42, 30, 22, 0.06);
    transform: scale(1.02);
}

.btn-ghost-light {
    background-color: transparent;
    color: #F6F1EC;
    border: 1.5px solid rgba(220, 196, 174, 0.4);
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-ghost-light:hover {
    background-color: rgba(220, 196, 174, 0.15);
    border-color: #DCC4AE;
    transform: scale(1.02);
}

/* ==========================================================================
   Navigation & Role Switcher
   ========================================================================== */
.role-btn {
    transition: all 0.25s ease;
    color: #A38C7D;
    border: 1px solid transparent;
}

.role-btn:hover {
    color: #F6F1EC;
    background-color: rgba(220, 196, 174, 0.08);
}

.role-btn.active {
    background-color: #BD8A7F;
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(189, 138, 127, 0.35);
}

/* Pill Category Tabs */
.category-pill {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #E9DED3;
    color: #4B362B;
    border: 1px solid rgba(75, 54, 43, 0.15);
}

.category-pill:hover {
    background-color: #DCC4AE;
    color: #2A1E16;
}

.category-pill.active {
    background-color: #2A1E16;
    color: #F6F1EC;
    border-color: #2A1E16;
    box-shadow: 0 4px 15px rgba(42, 30, 22, 0.2);
}

/* ==========================================================================
   Tasting Notes & Quantity Stepper
   ========================================================================== */
.stepper-pill {
    background-color: #F6F1EC;
    border: 1px solid rgba(75, 54, 43, 0.2);
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    gap: 8px;
}

.stepper-pill-dark {
    background-color: #1F150E;
    border: 1px solid rgba(220, 196, 174, 0.25);
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    gap: 8px;
}

.tasting-dot-filled {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: #BD8A7F;
    display: inline-block;
}

.tasting-dot-empty {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    border: 1px solid #BD8A7F;
    display: inline-block;
}

/* ==========================================================================
   Chat Messages & AI Concierge
   ========================================================================== */
.chat-msg-user {
    background: #BD8A7F;
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(189, 138, 127, 0.25);
}

.chat-msg-ai {
    background: #1F150E;
    color: #F6F1EC;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(220, 196, 174, 0.15);
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-msg {
    pointer-events: auto;
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(15px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #2A1E16;
}

::-webkit-scrollbar-thumb {
    background: #4B362B;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #BD8A7F;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   Responsive & Mobile Drawer Enhancements
   ========================================================================== */

/* Mobile Drawer Overlay & Slide */
.mobile-drawer-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-drawer-overlay.closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mobile-drawer-panel {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer-overlay.open .mobile-drawer-panel {
    transform: translateX(0);
}

.mobile-drawer-overlay.closed .mobile-drawer-panel {
    transform: translateX(100%);
}

/* Scroll Fade Mask for Horizontal Segmented Controls */
.scroll-fade-container {
    position: relative;
}

.scroll-fade-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to left, var(--color-creme) 20%, transparent);
    pointer-events: none;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
}

.scroll-fade-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, var(--color-creme) 20%, transparent);
    pointer-events: none;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    z-index: 2;
}

/* Touch optimization */
button, a, input, select {
    touch-action: manipulation;
}

@media (max-width: 640px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}