/*
 * ============================================================
 *  assets/css/theme.css
 *  Change ONLY this file to retheme the entire store.
 *  Every color, font, and spacing variable lives here.
 * ============================================================
 */

/* ── Google Font Import ─────────────────────────────────────
   Change both @import AND --font-display / --font-body below */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── CSS Custom Properties (Design Tokens) ───────────────── */
:root {
    /* Fonts */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    /* Core Palette */
    --color-bg:        #FAF9F7;   /* Page background */
    --color-surface:   #F0EDE8;   /* Cards, inputs bg */
    --color-border:    #E5E0D8;   /* Subtle borders */
    --color-muted:     #C4B8A8;   /* Placeholder, muted text */
    --color-secondary: #8C7B6B;   /* Secondary text, labels */
    --color-primary:   #2C1F14;   /* Headlines, buttons */
    --color-accent:    #B8924A;   /* Gold accent, CTAs, links */
    --color-white:     #FFFFFF;
    --color-cream:     #FAF9F7;

    /* Semantic */
    --color-text:        var(--color-primary);
    --color-text-muted:  var(--color-secondary);
    --color-link:        var(--color-accent);
    --color-btn-bg:      var(--color-primary);
    --color-btn-text:    var(--color-cream);
    --color-btn-hover:   var(--color-accent);

    /* Announcement bar */
    --color-announcement-bg:   var(--color-primary);
    --color-announcement-text: var(--color-cream);

    /* Nav */
    --color-nav-bg:    var(--color-cream);
    --color-nav-text:  var(--color-primary);
    --color-nav-hover: var(--color-accent);

    /* Footer */
    --color-footer-bg:   var(--color-primary);
    --color-footer-text: var(--color-cream);

    /* Spacing */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* Transitions */
    --transition: all 0.25s ease;
    --transition-slow: all 0.5s ease;
}

/*
 * ── ALTERNATE THEME EXAMPLES ─────────────────────────────────
 * Uncomment one block below to switch themes instantly.
 * ─────────────────────────────────────────────────────────── */

/* DARK MINIMAL THEME
:root {
    --color-bg:        #0F0F0F;
    --color-surface:   #1A1A1A;
    --color-border:    #2A2A2A;
    --color-muted:     #555;
    --color-secondary: #888;
    --color-primary:   #F5F5F5;
    --color-accent:    #E8C97E;
    --color-cream:     #0F0F0F;
    --color-nav-bg:    #0F0F0F;
    --color-nav-text:  #F5F5F5;
    --color-footer-bg: #050505;
    --font-display: 'Playfair Display', Georgia, serif;
}
*/

/* BLUSH / FEMININE THEME */
:root {
    --color-bg:        #FDF6F3;
    --color-surface:   #F7EDE8;
    --color-border:    #EDD5CC;
    --color-muted:     #D4A89A;
    --color-secondary: #A0665A;
    --color-primary:   #3D1C16;
    --color-accent:    #C0614F;
    --color-cream:     #FDF6F3;
    --color-nav-bg:    #FDF6F3;
    --color-footer-bg: #3D1C16;
}


.logo {
            max-height: 80px;
            /* width: 100%; */
        }

/* ── Base Styles ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    padding: .75rem 2rem;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-block;
    cursor: pointer;
    border: none;
}
.btn-primary:hover { background: var(--color-btn-hover); }

.btn-outline {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: .75rem 2rem;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-block;
    cursor: pointer;
    background: transparent;
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-cream); }

/* ── Nav Link Underline ───────────────────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--color-accent);
    transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Product Card ─────────────────────────────────────────── */
.product-card:hover .product-img { transform: scale(1.04); }
.product-img { transition: transform .5s ease; }

/* ── Cart Drawer ──────────────────────────────────────────── */
.cart-drawer {
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }

/* ── Overlay ──────────────────────────────────────────────── */
.overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.overlay.active { opacity: 1; pointer-events: all; }

/* ── Inputs ───────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent) !important;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-muted); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .6s ease forwards; }

/* ── Announcement Bar ─────────────────────────────────────── */
.announcement-bar {
    background: var(--color-announcement-bg);
    color: var(--color-announcement-text);
}
.announcement-bar a:hover { text-decoration: underline; }

/* ── Toast Notification ───────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    min-width: 260px;
    max-width: 340px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(80px);
    opacity: 0;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; pointer-events: all; }
#toast.success { background: #065F46; color: #fff; }
#toast.error   { background: #991B1B; color: #fff; }
#toast.info    { background: var(--color-primary); color: var(--color-cream); }