/* ==========================================================================
   DESIGN TOKENS — Irfan Mohammadi Haj & Umrah Tours
   Palette grounded in the Haram's sandstone facades, the green of the
   Prophet's Mosque dome, and brass lantern/minaret detailing.
   ========================================================================== */

:root {

  /* ---- Color: ink & stone ---- */
  --color-ink:          #1C2620;  /* body text — deep charcoal-green, not flat black */
  --color-ink-soft:     #4A5750;  /* secondary text */
  --color-cream:        #FAF5EA;  /* primary light background — warm sandstone */
  --color-cream-deep:   #F0E7D2;  /* alternate section / card background */
  --color-white:        #FFFFFF;

  /* ---- Color: emerald (brand primary) ---- */
  --color-emerald:       #0B4A38;  /* primary brand green */
  --color-emerald-light: #156B50;  /* lighter tint — gloss gradients only */
  --color-emerald-deep:  #062E22;  /* darkest green — hero/footer backgrounds */
  --color-emerald-soft:  #E7EFEA;  /* tinted green for subtle fills/badges */

  /* ---- Color: gold (accent, used sparingly) ---- */
  --color-gold:         #BD9650;  /* brass accent — dividers, icons, hover */
  --color-gold-light:   #E2C788;  /* gold for text-on-dark, highlights */

  /* ---- Color: utility ---- */
  --color-border:       #E2D6BC;
  --color-success:      #2E7D52;
  --color-whatsapp:       #25D366;
  --color-whatsapp-light: #4EE085;  /* lighter tint — gloss gradient only */

  /* ---- Typography ---- */
  --font-display: 'Amiri', Georgia, 'Times New Roman', serif;        /* headings — Arabic/Quranic-heritage serif */
  --font-body:    'Work Sans', -apple-system, Segoe UI, sans-serif;   /* body copy, nav, buttons */
  --font-label:   'Barlow Semi Condensed', sans-serif;                /* eyebrows, dates, prices — ticket/itinerary feel */

  /* Fluid type scale */
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-md:   1.15rem;
  --fs-lg:   clamp(1.4rem, 1.25rem + 0.8vw, 1.9rem);
  --fs-xl:   clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --fs-2xl:  clamp(2.4rem, 1.6rem + 3.2vw, 4rem);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ---- Layout ---- */
  --max-width:     1200px;
  --header-height: 84px;

  /* ---- Effects ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --shadow-sm:  0 2px 10px rgba(6, 46, 34, 0.08);
  --shadow-md:  0 10px 30px rgba(6, 46, 34, 0.14);
  --transition: 200ms ease;
}