/* ========================================
   Dazzling Star — CSS Variables
   Turquoise jewellery brand theme
   ======================================== */

:root {
    /* ── Brand Colours ── */
    --shop-primary:      #7ECEC6;
    --shop-primary-dark:  #5FB8B0;
    --shop-primary-light: #B5E8E3;
    --shop-primary-ultra-light: #E8F6F5;
    --shop-secondary:    #C9A96E;
    --shop-bg:           #FFFFFF;
    --shop-background:   #FFFFFF;
    --shop-text:         #1D1D2C;
    --shop-promo:        #C9A96E;
    --shop-muted:        #8A9A9E;
    --shop-text-muted:   #8A9A9E;
    --shop-border:       #E4EDED;
    --shop-surface:      #F7FAFA;

    /* ── Typography ── */
    --shop-heading-font: 'Cormorant Garamond', 'Georgia', serif;
    --shop-body-font:    'Montserrat', 'Helvetica Neue', sans-serif;

    /* ── Sizing / Radius ── */
    --shop-radius:       12px;
    --shop-radius-sm:    8px;
    --shop-radius-lg:    20px;
    --shop-max-width:    1200px;

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

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

    /* ── Shared-element compat ── */
    --color-primary:     var(--shop-primary);
    --color-white:       #FFFFFF;
    --color-black:       #1D1D2C;
    --color-gray-lighter:#E4EDED;
    --color-gray-dark:   #666;
    --radius-lg:         16px;
    --spacing-xs:        0.4rem;
    --spacing-sm:        0.75rem;
    --spacing-md:        1rem;
    --spacing-lg:        1.5rem;
    --spacing-xl:        2rem;
    --shadow-lg:         var(--shop-shadow-lg);
    --transition-base:   var(--shop-transition);
    --transition-fast:   0.2s ease;
}