/* ============================================
   LuxeGlow Salon – CSS Custom Properties
   variables.css  |  v2.0.2 (Responsive Enhanced)
   ============================================ */

:root {
    /* ── Palette ───────────────────────────── */
    --clr-black:       #0a0a0a;
    --clr-black-soft:  #111111;
    --clr-black-mid:   #1a1a1a;
    --clr-charcoal:    #242424;
    --clr-dark-bg:     #0f0f0f;

    --clr-gold:        #c9a96e;
    --clr-gold-light:  #f5dfa5;
    --clr-gold-dark:   #a07a40;
    --clr-gold-pale:   #f0d8a8;

    --clr-white:       #ffffff;
    --clr-off-white:   #faf7f2;
    --clr-nude:        #f5ede0;
    --clr-beige:       #e8d5b7;
    --clr-pink-soft:   #f9e8ef;
    --clr-pink-mid:    #e8a4be;
    --clr-rose:        #d4708a;

    --clr-gray-100:    #f8f5f0;
    --clr-gray-200:    #e5e0d8;
    --clr-gray-400:    #a09080;
    --clr-gray-600:    #6b5f52;
    --clr-gray-800:    #3d352c;

    /* ── Gradients ─────────────────────────── */
    --grad-gold:        linear-gradient(135deg, #c9a96e 0%, #f5dfa5 50%, #c9a96e 100%);
    --grad-gold-v:      linear-gradient(180deg, #c9a96e 0%, #a07a40 100%);
    --grad-dark:        linear-gradient(180deg, #0a0a0a 0%, #1a1414 100%);
    --grad-hero:        linear-gradient(135deg, rgba(10,10,10,.85) 0%, rgba(30,15,5,.6) 100%);
    --grad-card:        linear-gradient(145deg, #1e1e1e 0%, #151515 100%);
    --grad-glass:       linear-gradient(135deg, rgba(201,169,110,.08) 0%, rgba(245,223,165,.04) 100%);
    --grad-pink-gold:   linear-gradient(135deg, #f9e8ef 0%, #f5ede0 50%, #f5dfa5 100%);
    --grad-overlay:     linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 60%, transparent 100%);

    /* ── Typography ────────────────────────── */
    --font-serif:    'Cormorant Garamond', Georgia, serif;
    --font-display:  'Playfair Display', Georgia, serif;
    --font-sans:     'Inter', system-ui, sans-serif;

    --fs-xs:    clamp(.65rem,  1.2vw,  .75rem);
    --fs-sm:    clamp(.8rem,   1.5vw,  .875rem);
    --fs-base:  clamp(.9rem,   1.8vw,  1rem);
    --fs-md:    clamp(1rem,    2vw,    1.125rem);
    --fs-lg:    clamp(1.1rem,  2.5vw,  1.25rem);
    --fs-xl:    clamp(1.3rem,  3vw,    1.5rem);
    --fs-2xl:   clamp(1.6rem,  4vw,    2rem);
    --fs-3xl:   clamp(2rem,    5vw,    2.75rem);
    --fs-4xl:   clamp(2.4rem,  6vw,    3.5rem);
    --fs-5xl:   clamp(3rem,    8vw,    5rem);
    --fs-hero:  clamp(3.2rem,  9vw,    6.5rem);

    /* ── Spacing ───────────────────────────── */
    --sp-xs:   .25rem;
    --sp-sm:   .5rem;
    --sp-md:   1rem;
    --sp-lg:   1.5rem;
    --sp-xl:   2rem;
    --sp-2xl:  3rem;
    --sp-3xl:  4rem;
    --sp-4xl:  6rem;
    --sp-5xl:  8rem;
    --section-padding: clamp(3rem, 8vw, 7rem);

    /* ── Border radius ─────────────────────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────── */
    --shadow-sm:    0 2px 8px rgba(0,0,0,.15);
    --shadow-md:    0 8px 24px rgba(0,0,0,.25);
    --shadow-lg:    0 16px 48px rgba(0,0,0,.35);
    --shadow-xl:    0 24px 64px rgba(0,0,0,.45);
    --shadow-gold:  0 8px 32px rgba(201,169,110,.25);
    --shadow-gold-hover: 0 16px 48px rgba(201,169,110,.4);

    /* ── Transitions ───────────────────────── */
    --ease-smooth:  cubic-bezier(.25,.1,.25,1);
    --ease-out:     cubic-bezier(0, 0, .2, 1);
    --ease-spring:  cubic-bezier(.34,1.56,.64,1);
    --t-fast:   .15s;
    --t-base:   .3s;
    --t-slow:   .6s;
    --t-slower: 1s;

    /* ── Z-index layers ────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-sticky:  100;
    --z-navbar:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;
    --z-loading: 9999;

    /* ── Navbar ────────────────────────────── */
    --navbar-height:       80px;
    --navbar-height-scroll: 64px;
}

@media (prefers-color-scheme: light) {
    :root {
        --page-bg:   var(--clr-off-white);
        --text-main: var(--clr-black);
        --text-muted: var(--clr-gray-600);
    }
}