/* ============================================================
   ALHAYA SECRETS — DESIGN TOKENS · "Monochrome" edition
   Clean black & white: white background, black type, black
   buttons, Poppins everywhere. Every colour, font, spacing
   and shadow used on the site is defined here — and most of
   it is also editable from Admin -> Appearance.
   ============================================================ */
:root {

    /* ---------- CORE PALETTE (black & white) ---------- */
    --noir:        #FFFFFF;   /* page background                     */
    --noir-2:      #F7F7F7;   /* soft panels / alternating sections  */
    --plum:        #FFFFFF;   /* cards, drawers, inputs              */
    --plum-2:      #F1F1F1;   /* hover / raised surfaces             */
    --ivory:       #111111;   /* headlines & primary text            */
    --champagne:   #111111;   /* accent (prices, kickers, links)     */
    --champagne-2: #3A3A3A;   /* accent hover                        */
    --rose:        #6E6E6E;   /* secondary accent (wishlist hearts)  */
    --crimson:     #111111;   /* primary buttons                     */
    --crimson-2:   #2E2E2E;   /* button hover                        */

    /* ---------- LEGACY ALIASES (used across templates) ---------- */
    --wine:        var(--crimson);
    --wine-dark:   #000000;
    --wine-soft:   rgba(17, 17, 17, 0.05);
    --gold:        var(--champagne);
    --gold-soft:   rgba(17, 17, 17, 0.07);
    --blush:       var(--plum-2);
    --ink:         var(--ivory);
    --ink-soft:    #444444;                      /* body text        */
    --muted:       #8A8A8A;                      /* meta text        */
    --cream:       var(--noir-2);
    --surface:     var(--plum);
    --line:        rgba(17, 17, 17, 0.14);       /* hairline borders */

    /* header / footer bars (editable in Admin -> Appearance) */
    --header-bg:      rgba(255, 255, 255, 0.92);
    --header-text:    #111111;
    --footer-bg:      #111111;
    --footer-heading: #FFFFFF;
    --footer-text:    #C9C9C9;
    --footer-muted:   #8A8A8A;
    --announce-bg:    #111111;
    --announce-text:  #FFFFFF;

    /* semantic */
    --success:     #1E7A4C;
    --danger:      #C0273F;
    --warning:     #9A6A1F;

    /* ---------- TYPOGRAPHY (Poppins everywhere) ---------- */
    --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Poppins', 'Segoe UI', system-ui, sans-serif;

    --text-xs:   0.72rem;
    --text-sm:   0.85rem;
    --text-base: 0.95rem;
    --text-lg:   1.1rem;
    --text-xl:   1.35rem;
    --text-2xl:  1.75rem;
    --text-3xl:  clamp(1.9rem, 4vw, 2.6rem);
    --text-hero: clamp(2.2rem, 6vw, 4rem);

    /* ---------- SPACING SCALE ---------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;
    --section-gap: clamp(3.5rem, 8vw, 6.5rem);   /* editable: Appearance -> Layout */
    --container:   1320px;                        /* editable: Appearance -> Layout */
    --gutter:      clamp(1rem, 4vw, 2.5rem);

    /* ---------- SHAPE & SHADOW (editable: Appearance -> Layout) ---------- */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-full: 999px;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow:    0 12px 34px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.18);
    --glow-gold: 0 0 0 1px rgba(17, 17, 17, 0.2), 0 8px 30px rgba(17, 17, 17, 0.08);

    /* ---------- MOTION ---------- */
    --ease:      cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast:  180ms;
    --dur:       340ms;
    --dur-slow:  700ms;

    /* ---------- COMPONENT SIZES ---------- */
    --header-h:      64px;
    --announce-h:    36px;
    --tap-target:    44px;
}

/* ---------- DARK MODE (toggle switch, Admin -> Appearance) ---------- */
:root[data-theme="dark"] {
    --noir:        #121212;
    --noir-2:      #1A1A1A;
    --plum:        #1E1E1E;
    --plum-2:      #262626;
    --ivory:       #F2F2F2;
    --champagne:   #F2F2F2;
    --champagne-2: #CFCFCF;
    --rose:        #B9B9B9;
    --crimson:     #F2F2F2;
    --crimson-2:   #D8D8D8;
    --ink-soft:    #C9C9C9;
    --muted:       #9A9A9A;
    --line:        rgba(255, 255, 255, 0.14);
    --header-bg:      rgba(18, 18, 18, 0.92);
    --header-text:    #F2F2F2;
    --footer-bg:      #000000;
    --footer-heading: #F2F2F2;
    --footer-text:    #C9C9C9;
    --announce-bg:    #000000;
    --announce-text:  #F2F2F2;
}
:root[data-theme="dark"] .btn:not(.btn-outline):not(.btn-danger) { color: #121212; }