/* ═══════════════════════════════════════════════════════════════
   BUTTONS.CSS — Global Button Variants
   DEKO STORE Ecommerce · Light Luxury Theme
═══════════════════════════════════════════════════════════════ */

/* ── Primary CTA — maroon (Add to Cart, Checkout, Buy Now) ── */
.btn-gold {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--color-primary); color: #fff; border: none;
    border-radius: var(--r-md); padding: .72rem 1.8rem;
    font-weight: var(--fw-semi); font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    cursor: pointer; font-family: inherit;
    min-height: 44px; white-space: nowrap;
    position: relative; overflow: hidden;
    transition: background var(--t), box-shadow var(--t), transform 160ms ease;
    touch-action: manipulation;
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), .22);
}
.btn-gold::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
    border-radius: inherit;
}
.btn-gold:hover::before { opacity: 1; }
.btn-gold:hover  {
    background: var(--color-primary-active); color: #fff;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), .32);
    transform: translateY(-1px);
}
.btn-gold:active { transform: scale(.97) translateY(0); box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), .2); }
.btn-gold:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ── Gold solid (secondary CTA) ─────────────────────────────── */
.btn-gold-solid {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .88rem 2.3rem;
    background: var(--color-accent); color: var(--color-primary);
    border: none; border-radius: 4px;
    font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wider); text-transform: uppercase; cursor: pointer;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 22px rgba(var(--color-accent-rgb), .32);
    transition: background var(--t), box-shadow var(--t), transform 160ms ease;
}
.btn-gold-solid::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 55%);
    opacity: 0; transition: opacity 180ms ease;
    pointer-events: none; border-radius: inherit;
}
.btn-gold-solid:hover::before { opacity: 1; }
.btn-gold-solid:hover  {
    background: var(--color-accent-light);
    box-shadow: 0 8px 36px rgba(var(--color-accent-rgb), .42);
    transform: translateY(-1px);
}
.btn-gold-solid:active { transform: scale(.97) translateY(0); }

/* ── Outline variant ─────────────────────────────────────────── */
.btn-outline-gold {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; color: var(--color-primary);
    border: 1.5px solid var(--color-primary); border-radius: var(--r-md);
    padding: .7rem 1.75rem; font-weight: var(--fw-semi); font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    cursor: pointer; font-family: inherit;
    min-height: 44px; white-space: nowrap;
    transition: background var(--t), color var(--t), box-shadow var(--t), transform 160ms ease;
}
.btn-outline-gold:hover  {
    background: var(--color-primary); color: #fff;
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}
.btn-outline-gold:active { transform: scale(.97) translateY(0); }
.btn-outline-gold:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ── Ghost button ────────────────────────────────────────────── */
.btn-ghost {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; color: var(--text-2);
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: .7rem 1.5rem; font-weight: 500; font-size: .875rem;
    cursor: pointer; font-family: inherit; min-height: 44px;
    transition: border-color var(--t), color var(--t), background var(--t), transform 160ms ease;
}
.btn-ghost:hover  { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.btn-ghost:active { transform: scale(.97); }

/* ── Size modifiers ──────────────────────────────────────────── */
.btn-sm {
    padding: .48rem 1rem;
    font-size: var(--fs-xs);
    min-height: 36px;
    border-radius: var(--r-sm);
}