/* Goga Jain - Numismatist | Off-White & Cream Heritage Design */
:root {
    --bg-main: #fcfbf8;
    --bg-offwhite: #f7f4ed;
    --bg-card: #ffffff;
    --gold-primary: #b48518;
    --gold-dark: #916609;
    --gold-light: #fef7e0;
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --border-light: #e7e2d7;
}

html, body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}

.font-serif {
    font-family: 'Cinzel', Georgia, serif;
}

/* Warm Off-White Gradients */
.hero-offwhite {
    background: linear-gradient(135deg, #fdfcf9 0%, #f6f1e7 50%, #fbf8f2 100%);
}

.card-luxury {
    background: #ffffff;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px -2px rgba(180, 133, 24, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
    .card-luxury:hover {
        transform: translateY(-4px);
        border-color: var(--gold-primary);
        box-shadow: 0 12px 28px -4px rgba(180, 133, 24, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
    }
}

/* Mobile Touch Active State */
.card-luxury:active {
    border-color: var(--gold-primary);
}

/* Custom Scrollbar in Off-white */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f7f4ed;
}
::-webkit-scrollbar-thumb {
    background: #d6cfbf;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #b8af9b;
}

/* Hide scrollbar for horizontal mobile scrollers */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile Safe Areas */
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 1rem);
}
.bottom-safe {
    bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobile navigation drawer: works even if the Tailwind CDN is slow/blocked */
#mobileNavDrawer { display: none; }
#mobileNavDrawer.is-open { display: block; }
body.menu-open { overflow: hidden; }
@media (min-width: 768px) {
    #mobileNavDrawer, #mobileMenuBtn { display: none !important; }
}
#mobileMenuBtn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; position: relative; z-index: 1; }