/* ============================================================
   NAFAHAAT PERFUMES — DESIGN TOKENS
   All CSS custom properties. Single source of truth.
   ============================================================ */

:root {
  /* ── BRAND COLORS (EXTRACTED FROM OFFICIAL POSTER & LOGO) ──────────────── */
  --color-primary:        #347F79; /* Rich Arabic Calligraphy Teal */
  --color-primary-dark:   #235B57; /* Deep Jade / Spruce Teal */
  --color-primary-light:  #EBF5F4; /* Soft Mint Ivory / Whisper Teal */
  --color-secondary:      #143836; /* Deep Midnight Spruce Teal */
  --color-secondary-mid:  #1D4A47; /* Mid Spruce Teal */
  --color-secondary-light:#286360; /* Forest Teal */

  /* ── LUXURY NEUTRALS & POSTER IVORY ────────────────────── */
  --color-bg:             #FAF8F4; /* Warm Poster Ivory Cream */
  --color-surface:        #FFFFFF; /* Pure White */
  --color-neutral-50:     #F6F4EE;
  --color-neutral-100:    #EEEBE2;
  --color-neutral-200:    #DED7C8;
  --color-neutral-300:    #C4BCA9;
  --color-neutral-400:    #8E8775;
  --color-neutral-500:    #656154;
  --color-neutral-600:    #47443B;
  --color-neutral-700:    #2B2A24;
  --color-neutral-900:    #151412;

  /* ── SEMANTIC & ACCENT COLORS (FROM CALLIGRAPHY GOLD DOTS) */
  --color-success:        #2E8B57;
  --color-warning:        #D97706;
  --color-error:          #DC2626;
  --color-info:           #2563EB;
  --color-gold:           #B8955E; /* Warm Antique Calligraphy Gold */
  --color-gold-light:     #DBB177; /* Radiant Poster Gold */
  --color-gold-hover:     #C9A368;
  --color-gold-bg:        #FAF5EC;

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

  --text-hero:   clamp(48px, 6vw, 72px);
  --text-h1:     clamp(36px, 4.5vw, 56px);
  --text-h2:     clamp(28px, 3.5vw, 42px);
  --text-h3:     clamp(22px, 2.8vw, 34px);
  --text-h4:     clamp(20px, 2.2vw, 28px);
  --text-xl:     clamp(18px, 1.6vw, 20px);
  --text-base:   1rem;
  --text-sm:     0.888rem;
  --text-xs:     0.777rem;
  --text-2xs:    0.666rem;

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

  /* ── SPACING ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  /* Section padding - refined & balanced */
  --section-pad-y:   48px;
  --section-pad-x:   40px;
  --section-pad-mobile: 28px;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --container-max:   1320px;
  --container-wide:  1440px;
  --grid-cols:       12;
  --grid-gap:        32px;

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       20px;
  --radius-2xl:      24px;
  --radius-full:     9999px;

  /* Button radius */  --radius-btn:      12px;
  /* Input radius */   --radius-input:    12px;
  /* Card radius */    --radius-card:     16px;
  /* Product card */   --radius-product:  20px;
  /* Modal radius */   --radius-modal:    24px;
  /* Drawer radius */  --radius-drawer:   24px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(20,56,54,.05);
  --shadow-sm:   0 2px 8px rgba(20,56,54,.07);
  --shadow-md:   0 6px 20px rgba(20,56,54,.09);
  --shadow-lg:   0 12px 36px rgba(20,56,54,.12);
  --shadow-xl:   0 20px 60px rgba(20,56,54,.15);
  --shadow-header: 0 8px 32px rgba(20,56,54,.06);
  --shadow-card-hover: 0 16px 45px rgba(52,127,121,.18);
  --shadow-primary: 0 8px 26px rgba(52,127,121,.25);
  --shadow-btn-hover: 0 8px 24px rgba(52,127,121,.30);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    300ms ease;
  --transition-slow:    400ms ease;
  --transition-hero:    800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX LAYERS ───────────────────────────────────── */
  --z-base:      1;
  --z-sticky:    100;
  --z-header:    200;
  --z-drawer:    300;
  --z-modal:     400;
  --z-toast:     500;
  --z-splash:    1000;

  /* ── HEADER ───────────────────────────────────────────── */
  --header-height:        90px;
  --header-height-tablet: 72px;
  --header-height-mobile: 64px;
  --announcement-height:  40px;
}

/* ── DARK SECTION OVERRIDES ───────────────────────────── */
.dark-section {
  --color-bg: var(--color-secondary);
  color: #fff;
}