/* ============================================================
   L'ÉLIXIR MAISON DE PARFUM — Storefront Specific Variables
   ============================================================ */

:root {
  /* ── Luxury White-First Palette ───────────────────────────── */
  --color-white:          #FFFFFF;
  --bg-base:              #FAFAF8;
  --bg-warm:              #F7F6F2;
  --bg-ivory:             #F5F4F1;
  --bg-surface:           #FFFFFF;
  --bg-surface-1:         #FFFFFF;
  --bg-surface-2:         #F7F6F2;
  --bg-surface-3:         #EFECE6;
  --bg-overlay:           rgba(26, 26, 26, 0.5);

  /* ── Typography Palette ───────────────────────────────── */
  --text-primary:         #1A1A1A;
  --text-secondary:       #555555;
  --text-muted:           #888888;
  --text-inverse:         #FFFFFF;
  --border-color:         #E8E7E3;
  --border-color-light:   #F0EFEA;
  --border-color-dark:    #1A1A1A;

  /* ── Accent System ───────────────────────────────────── */
  --color-accent:         #C48B9F; /* Elegant Subtle Rose Accent */
  --color-accent-soft:    #F8F2F5;
  --color-accent-gold:    #C8B37A; /* Soft Champagne Gold */
  --color-primary:        #1A1A1A;
  --color-primary-light:  #333333;
  --color-primary-dark:   #000000;
  --color-primary-glow:   rgba(196, 139, 159, 0.15);

  /* ── Status Colors (Subtle & Restrained) ─────────────── */
  --color-success:        #4A7C59;
  --color-success-soft:   rgba(74, 124, 89, 0.12);
  --color-warning:        #B8860B;
  --color-warning-soft:   rgba(184, 134, 11, 0.12);
  --color-danger:         #A94442;
  --color-danger-soft:    rgba(169, 68, 66, 0.12);
  --color-info:           #5B7B88;
  --color-info-soft:      rgba(91, 123, 136, 0.12);

  /* ── Layout & Grid ────────────────────────────────────── */
  --max-width-screen:     1440px;
  --max-width-content:    1280px;
  --nav-height:           80px;

  /* ── Spacing System ───────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-48:  48px;
  --space-64:  64px;
  --space-96:  96px;
  --space-120: 120px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-btn:   6px;
  --radius-card:  12px;
  --radius-round: 50%;
  --radius-pill:  9999px;

  /* ── Shadows (Soft & Luxury) ───────────────────────────── */
  --shadow-card:   0 8px 30px rgba(0, 0, 0, 0.04);
  --shadow-hover:  0 12px 40px rgba(0, 0, 0, 0.07);
  --shadow-nav:    0 4px 20px rgba(0, 0, 0, 0.03);

  /* ── Typography Scale & Fonts ─────────────────────────── */
  --font-serif:    'Cormorant Garamond', 'DM Serif Display', Georgia, serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs:       12px;
  --text-sm:       14px;
  --text-base:     16px;
  --text-lg:       18px;
  --text-xl:       20px;
  --text-2xl:      24px;
  --text-3xl:      32px;
  --text-4xl:      48px;
  --text-5xl:      64px;

  --text-micro:    12px;
  --text-caption:  14px;
  --text-body:     16px;
  --text-card:     20px;
  --text-section:  32px;
  --text-heading:  48px;
  --text-hero:     64px;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ── Motion & Animation Timing ────────────────────────── */
  --transition-fast:   250ms ease;
  --transition-base:   300ms ease;
  --transition-smooth: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow:   600ms cubic-bezier(0.25, 1, 0.5, 1);
}