/* ═══════════════════════════════════════════
   Glamour — Design System Variables
   Theme: Luxury emerald & gold, art deco
   ═══════════════════════════════════════════ */

:root {
    /* ── Brand Colours ── */
    --shop-primary:       #1B5E3B;
    --shop-primary-dark:  #0F3D26;
    --shop-primary-light: #2A7A50;
    --shop-primary-tint:  rgba(27, 94, 59, 0.08);

    --shop-secondary:     #C9A84C;
    --shop-secondary-dark:#A88B3A;
    --shop-secondary-light:#D4BC6F;

    --shop-promo:         #C9A84C;

    /* ── Neutrals ── */
    --shop-bg:            #FFFFFF;
    --shop-background:    #FFFFFF;
    --shop-text:          #1A1A1A;
    --shop-text-muted:    #7A7A7A;
    --shop-muted:         #7A7A7A;
    --shop-border:        #E8E4DE;
    --shop-surface:       #FAF8F5;

    /* ── Semantic ── */
    --color-white:        #FFFFFF;
    --color-black:        #1A1A1A;
    --color-primary:      var(--shop-primary);
    --color-gray-lighter: #F0EDE8;
    --color-gray-dark:    #666666;

    /* ── Typography ── */
    --shop-heading-font:  'Playfair Display', serif;
    --shop-body-font:     'Inter', sans-serif;

    /* ── Spacing ── */
    --spacing-xs:  0.4rem;
    --spacing-sm:  0.75rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* ── Radius ── */
    --shop-radius:    12px;
    --shop-radius-sm: 8px;
    --shop-radius-lg: 20px;
    --radius-lg:      16px;

    /* ── Shadows ── */
    --shop-shadow:    0 2px 8px rgba(26, 26, 26, 0.06);
    --shop-shadow-md: 0 4px 16px rgba(26, 26, 26, 0.08);
    --shop-shadow-lg: 0 12px 36px rgba(26, 26, 26, 0.10);
    --shadow-lg:      0 10px 25px rgba(0, 0, 0, 0.1);

    /* ── Transitions ── */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout ── */
    --max-width: 1200px;
    --navbar-height: 70px;
}

@media (max-width: 768px) {
    :root {
        --navbar-height: 60px;
    }
}