/* =========================================================
   theme.css — Wedding Palette (single source of truth)
   ---------------------------------------------------------
   Semua warna situs HARUS merujuk ke var(--token) di sini.
   Jangan hard-code hex/rgb di file lain.
   Di-load PALING AWAL di includes/header.php agar token
   tersedia untuk base.css, style.css, components/, pages/,
   pricelist.css, media.css, dll.
   ========================================================= */

:root {
    /* --- Surfaces ------------------------------------- */
    --surface-base:      #F5F1EA; /* Linen  – page background utama */
    --surface-raised:    #D7C9B8; /* Khaki  – card / panel / input bg */
    --surface-dark:      #4A342A; /* Espresso – header, footer, hero overlay */
    --surface-darker:    #3A281F; /* Espresso deeper – hover footer, shadow block */
    --surface-card:      #EAE2D9; /* Linen deeper – kartu/produk di atas surface-base */

    /* --- Brand ---------------------------------------- */
    --brand-accent:      #B2967D; /* Camel  – border halus, icon, divider */
    --brand-secondary:   #7D5A44; /* Cocoa  – tombol sekunder, link hover */

    /* --- CTA & status --------------------------------- */
    --cta-gold:          #C9A961; /* Champagne – tombol utama, ribbon best seller/new arrival */
    --cta-gold-hover:    #B8975A;
    --success-sage:      #8A9A7B; /* Sage – badge "Tersedia", konfirmasi booking */
    --danger-terracotta: #C97B5A; /* Terracotta – error / flash sale countdown */

    /* --- Typography ----------------------------------- */
    --text-primary:      #4A342A; /* Espresso – heading & body di atas linen */
    --text-muted:        #7D5A44; /* Cocoa    – subtitle, caption */
    --text-on-dark:      #F5F1EA; /* Linen    – teks di atas espresso */
    --text-on-dark-muted:#D7C9B8; /* Khaki    – subteks di atas espresso */
    --text-on-gold:      #4A342A; /* Espresso – teks di atas champagne */

    /* --- Borders & shadows ---------------------------- */
    --border-subtle:     rgba(125, 90, 68, 0.18);
    --border-strong:     rgba(125, 90, 68, 0.35);
    --shadow-warm:       0 10px 30px rgba(74, 52, 42, 0.12);
    --shadow-warm-lg:    0 20px 40px rgba(74, 52, 42, 0.18);
    --overlay-warm:      linear-gradient(to bottom, rgba(74, 52, 42, 0.75), rgba(74, 52, 42, 0.95));

    /* --- Overlay layers (header/menu di atas foto) ---- */
    --overlay-dropdown:    rgba(58, 40, 31, 0.35);  /* submenu mobile */
    --overlay-header-hero: rgba(74, 52, 42, 0.72);  /* header di atas hero */
    --overlay-hover-light: rgba(245, 241, 234, 0.08);
    --overlay-hover-strong:rgba(245, 241, 234, 0.16);
}


/* ---------------------------------------------------------
   BASE APPLICATION
   --------------------------------------------------------- */

body {
    background-color: var(--surface-base);
    color: var(--text-primary);
}

a {
    color: var(--brand-secondary);
}
a:hover {
    color: var(--cta-gold);
}


/* ---------------------------------------------------------
   HEADER & FOOTER (espresso frame)
   --------------------------------------------------------- */

header#desktop-header,
.footer-desktop,
.mobile-header,
.nav-container {
    background-color: var(--surface-dark);
    color: var(--text-on-dark);
}

.footer-desktop a,
header#desktop-header a {
    color: var(--text-on-dark);
}
.footer-desktop a:hover,
header#desktop-header a:hover {
    color: var(--cta-gold);
}


/* ---------------------------------------------------------
   GENERIC BUTTONS
   --------------------------------------------------------- */

.btn-primary,
button.cta,
a.cta {
    background: var(--cta-gold);
    color: var(--text-on-gold);
    border: none;
}
.btn-primary:hover,
button.cta:hover,
a.cta:hover {
    background: var(--cta-gold-hover);
    color: var(--text-on-gold);
}

.btn-secondary,
button.outline {
    background: transparent;
    color: var(--brand-secondary);
    border: 1px solid var(--brand-secondary);
}
.btn-secondary:hover,
button.outline:hover {
    background: var(--brand-secondary);
    color: var(--text-on-dark);
}


/* ---------------------------------------------------------
   CARDS & SURFACES
   --------------------------------------------------------- */

.card,
.paket-card,
.event-item,
.detail-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-warm);
    color: var(--text-primary);
}


/* ---------------------------------------------------------
   RIBBON BADGES (best seller / new arrival / vip / hemat)
   --------------------------------------------------------- */

.best-seller::after,
.new-arrival::after,
.vip-badge::after,
.hemat-badge::after {
    background: linear-gradient(45deg, var(--cta-gold), var(--brand-secondary)) !important;
    color: var(--text-on-dark) !important;
}


/* ---------------------------------------------------------
   STATUS BADGES
   --------------------------------------------------------- */

.badge-success,
.status-available {
    background: var(--success-sage);
    color: var(--text-on-dark);
}
.badge-danger,
.status-flash-sale {
    background: var(--danger-terracotta);
    color: var(--text-on-dark);
}


/* ---------------------------------------------------------
   HERO IMAGE TONE CORRECTION
   Foto lama kadang bernuansa cool/blue; filter ringan ini
   menyelaraskannya dengan palet warm tanpa mengubah file.
   Terapkan hanya pada section yang memang butuh.
   --------------------------------------------------------- */

.page-header img,
.hero-section img,
.warm-tone {
    filter: saturate(0.9) sepia(0.12);
}