/* ============================================
   MINI AMOUR — Design System Variables
   "Midnight Luxe" — Dark mode with gold,
   violet, and rose accents. Inspired by
   Tom Ford, Byredo, and Dior noir aesthetics.
   ============================================ */

:root {
  /* ---- Core Dark Palette ---- */
  --clr-bg:             #0A0A0F;    /* near-black with blue undertone */
  --clr-surface:        #141419;    /* elevated surface */
  --clr-card:           #1C1C24;    /* card/panel surface */
  --clr-border:         #2A2A35;    /* subtle dividers */
  --clr-border-light:   rgba(255, 255, 255, 0.06);

  /* ---- Gold Spectrum ---- */
  --clr-gold:           #C9A55C;    /* primary gold accent */
  --clr-gold-light:     #E2C87E;    /* hover / highlight */
  --clr-gold-muted:     #8B7A4A;    /* subtle secondary gold */
  --clr-gold-dark:      #A8893A;    /* aged gold */

  /* ---- Vibrant Accents ---- */
  --clr-maroon:         #6B1E3A;    /* deep maroon-pink from product photos */
  --clr-maroon-light:   #8B2D4F;    /* lighter maroon for hovers */
  --clr-maroon-soft:    rgba(107, 30, 58, 0.25);
  --clr-rose:           #C44569;    /* warm rose derived from maroon */
  --clr-rose-soft:      rgba(196, 69, 105, 0.15);
  --clr-amber:          #F59E0B;    /* energy accent */

  /* ---- Text Colors ---- */
  --clr-champagne:      #F5E6D0;    /* primary text (warm white) */
  --clr-ivory:          #FFFDF7;    /* brightest text */
  --clr-silver:         #A8A4B3;    /* secondary / body text */
  --clr-muted:          #6B6B7B;    /* tertiary / captions */

  /* ---- Legacy mappings (backward compat) ---- */
  --clr-white:          #FFFDF7;
  --clr-black:          #0A0A0F;

  /* ---- Semantic ---- */
  --clr-success:        #25D366;
  --clr-error:          #D32F2F;
  --clr-badge-her:      var(--clr-rose);
  --clr-badge-him:      #3B82F6;
  --clr-badge-unisex:   var(--clr-maroon);
  --clr-badge-luxe:     var(--clr-gold);

  /* ---- Fragrance Family Colors ---- */
  --clr-fam-floral:     #E879A0;
  --clr-fam-woody:      #A38B6D;
  --clr-fam-oriental:   #D4A03C;
  --clr-fam-fresh:      #6BC4A6;
  --clr-fam-amber:      #D4883A;
  --clr-fam-chypre:     #A8816D;

  /* ---- Glass Effects ---- */
  --glass-bg:           rgba(255, 255, 255, 0.04);
  --glass-bg-hover:     rgba(255, 255, 255, 0.07);
  --glass-border:       rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(201, 165, 92, 0.15);
  --glass-blur:         16px;

  /* ---- Typography ---- */
  --ff-display:         'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:              0.75rem;
  --fs-sm:              0.875rem;
  --fs-base:            1rem;
  --fs-md:              1.125rem;
  --fs-lg:              1.25rem;
  --fs-xl:              1.5rem;
  --fs-2xl:             2rem;
  --fs-3xl:             2.75rem;
  --fs-4xl:             3.5rem;
  --fs-5xl:             4.5rem;

  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  --lh-tight:           1.1;
  --lh-snug:            1.3;
  --lh-base:            1.6;
  --lh-relaxed:         1.75;

  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.06em;
  --ls-wider:           0.12em;
  --ls-widest:          0.18em;

  /* ---- Spacing ---- */
  --sp-2:               0.125rem;
  --sp-4:               0.25rem;
  --sp-6:               0.375rem;
  --sp-8:               0.5rem;
  --sp-12:              0.75rem;
  --sp-16:              1rem;
  --sp-20:              1.25rem;
  --sp-24:              1.5rem;
  --sp-32:              2rem;
  --sp-40:              2.5rem;
  --sp-48:              3rem;
  --sp-64:              4rem;
  --sp-80:              5rem;
  --sp-96:              6rem;
  --sp-128:             8rem;

  /* ---- Layout ---- */
  --container-max:      1200px;
  --container-pad:      var(--sp-20);

  /* ---- Borders & Radii ---- */
  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          16px;
  --radius-full:        9999px;

  /* ---- Shadows ---- */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl:          0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow-gold:   0 0 30px rgba(201, 165, 92, 0.2), 0 0 60px rgba(201, 165, 92, 0.08);
  --shadow-glow-maroon: 0 0 30px rgba(107, 30, 58, 0.2), 0 0 60px rgba(107, 30, 58, 0.08);

  /* ---- Transitions ---- */
  --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:        cubic-bezier(0.42, 0, 0.58, 1);
  --ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:           150ms;
  --dur-base:           300ms;
  --dur-slow:           500ms;
  --dur-reveal:         700ms;

  /* ---- Z-index ---- */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-overlay:          300;
  --z-modal:            400;
  --z-floating:         500;
}

@media (min-width: 768px) {
  :root {
    --container-pad:    var(--sp-32);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad:    var(--sp-40);
  }
}