:root {
  /* ═══ Official Zumra 11 Brand Colors ═══ */

  /* Primary Brand (20% — Zamzam Teal) */
  --teal-signature:      #0D5B5A;
  --teal-signature-soft: #1A6F6E;
  --teal-signature-dark: #084746;
  --teal-glow:           rgba(13, 91, 90, 0.4);
  --teal-light:          #4A8B8E;

  /* Accent (15% — Copper Clay) */
  --terracotta:          #C46A36;
  --terracotta-soft:     #D4844F;
  --terracotta-dark:     #A85525;
  --terracotta-hot:      #E07534;

  /* Anchor (5% — Midnight Kaaba) */
  --kaaba-anchor:        #0B0D10;

  /* Neutral Foundation (40% — Haram Limestone) */
  --limestone:           #D9CDB8;
  --limestone-soft:      #E4DCC9;
  --limestone-deep:      #C2B49A;

  /* Background (20% — Pilgrim White) */
  --pilgrim-white:       #F7F5F1;

  /* Supporting */
  --sage-light:          #B5C9B5;
  --sage-mid:            #7A9A85;

  /* Dark backgrounds */
  --bg-deepest:   #0B0D10;
  --bg-base:      #1A1F26;
  --bg-elevated:  #232932;
  --bg-charcoal:  #414453;

  /* Variety palette (per-card / per-step accents — unchanged) */
  --brand-amber:  #D99109;
  --brand-pink:   #E44966;
  --brand-cyan:   #359AB5;
  --brand-purple: #4D4496;

  --ink-100: #FFFFFF;
  --ink-80:  rgba(255, 255, 255, 0.80);
  --ink-60:  rgba(255, 255, 255, 0.60);
  --ink-40:  rgba(255, 255, 255, 0.40);
  --ink-25:  rgba(255, 255, 255, 0.25);
  --ink-12:  rgba(255, 255, 255, 0.12);
  --ink-06:  rgba(255, 255, 255, 0.06);

  --line-teal: rgba(13, 91, 90, 0.35);
  --line-warm: rgba(196, 106, 54, 0.20);

  --font-ar:      'Tajawal', 'Cairo', sans-serif;
  --font-en:      'Inter', sans-serif;
  --font-display: 'Tajawal', sans-serif;

  --ts-display-xl: clamp(48px, 8vw, 96px);
  --ts-display-lg: clamp(36px, 5vw, 64px);
  --ts-h1:         clamp(28px, 3.5vw, 44px);
  --ts-h2:         clamp(22px, 2.5vw, 32px);
  --ts-body-lg:    clamp(16px, 1.2vw, 18px);
  --ts-body:       15px;
  --ts-caption:    12px;
  --ts-eyebrow:    11px;
}