/* Shared-hosting friendly custom CSS can live here. */

.brand-gold-3d {
    color: #caa85a;
    display: inline-block;
    background:
        linear-gradient(115deg, #6f4f16 0%, #b8862d 18%, #fff0b8 34%, #d6a542 50%, #8b611d 66%, #f8d778 82%, #7a5518 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 1px 0 #fff2bf,
        0 2px 0 #b8872d,
        0 3px 0 #795018,
        0 4px 0 #3f2a0d,
        0 9px 16px rgba(0, 33, 23, 0.26);
    filter: drop-shadow(0 1px 0 rgba(255, 246, 200, 0.7));
}

.brand-gold-3d::selection {
    -webkit-text-fill-color: #002117;
}

/*
 * Shared luxury darkening layer.
 * These overrides keep the CDN-only Tailwind setup intact while shifting
 * the storefront from cream surfaces to a deeper evening palette.
 */
body {
    background-color: #111615 !important;
}

.bg-background,
.bg-surface {
    background-color: #111615 !important;
}

.bg-surface\/90 {
    background-color: rgba(17, 22, 21, 0.92) !important;
}

.bg-surface-container-lowest {
    background-color: #171d1b !important;
}

.bg-surface-container-low {
    background-color: #1b2320 !important;
}

.bg-surface-container,
.bg-surface-variant {
    background-color: #222b27 !important;
}

.bg-surface-container-high {
    background-color: #29332e !important;
}

.bg-surface-container-highest,
.bg-surface-bright {
    background-color: #303a34 !important;
}

.text-on-background,
.text-on-surface {
    color: #f7f0e6 !important;
}

.text-on-surface-variant,
.text-secondary {
    color: #d6ccbd !important;
}

.text-primary {
    color: #d9b866 !important;
}

.text-outline,
.text-outline-variant {
    color: #a89e90 !important;
}

.border-outline,
.border-outline-variant,
.border-outline-variant\/10,
.border-outline-variant\/20,
.border-outline-variant\/30,
.border-outline-variant\/40,
.border-outline\/10,
.border-outline\/20,
.border-outline\/30,
.border-outline\/40 {
    border-color: rgba(185, 174, 154, 0.28) !important;
}

input,
select,
textarea {
    color: #f7f0e6 !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(214, 204, 189, 0.6) !important;
}

.home-hero-image {
    filter: contrast(1.08) saturate(1.08);
    transform: translateZ(0);
}