/* ==========================================================================
   Bait Ul Shifa — design tokens (single source of truth)
   Loaded before each page's inline <style>. Values below match the site's
   existing look; the inline blocks only *reference* these variables.
   Do not add a second colour/spacing system alongside this one.
   ========================================================================== */
:root{
  /* ── colour: grounds ── */
  --night:#0A1811;         /* page background            */
  --night-2:#0D2016;       /* alternating section band   */
  --panel:#12281B;         /* cards / raised surfaces    */

  /* ── colour: text ── */
  --ivory:#F0E9D6;         /* primary text               */
  --ivory-dim:#BDBAA2;     /* secondary / body text      */
  --sage:#93AC9C;          /* labels, eyebrows, notes    */

  /* ── colour: accent ── */
  --brass:#D8AE55;         /* primary accent / links     */
  --brass-hi:#F0CE7F;      /* bright accent / highlights */
  --brass-dim:#8A6B2A;     /* muted accent               */
  --henna:#D26E3F;         /* terracotta accent          */
  --henna-hi:#E58A5B;      /* terracotta for TEXT on dark (AA-safe on --panel) */
  --emerald:#3EA97E;       /* green accent / hints       */
  --wa:#28C065;            /* WhatsApp green             */

  /* ── colour: lines ── */
  --line:rgba(216,174,85,.32);
  --line-soft:rgba(240,233,214,.13);

  /* ── radius (was an ad-hoc mix of 2/3/4/6px) ── */
  --radius-xs:3px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-pill:999px;

  /* ── elevation (dark-theme: soft ambient shadow + brass glow) ── */
  --elev-1:0 1px 2px rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.28);
  --elev-2:0 6px 18px rgba(0,0,0,.42), 0 14px 40px rgba(0,0,0,.30);
  --glow:0 0 44px rgba(216,174,85,.16);

  /* ── spacing scale (4px base) ── */
  --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-18:72px;
  --space-20:80px;

  /* ── type scale (collapses ~30 one-off sizes to a deliberate ramp) ── */
  --fs-3xs:.72rem;   /* eyebrows, tags, tiny labels        */
  --fs-2xs:.8rem;    /* small notes                         */
  --fs-xs:.86rem;    /* captions, chips                     */
  --fs-sm:.92rem;    /* secondary body, card copy           */
  --fs-md:.98rem;    /* dense body                          */
  --fs-base:1rem;    /* base UI text                        */
  --fs-lg:1.05rem;   /* lede / emphasis body                */
  --fs-xl:1.2rem;    /* small headings (h3)                 */
  --fs-2xl:1.35rem;  /* card / feature headings             */
  --fs-3xl:1.6rem;   /* sub-display                         */
  --fs-4xl:2rem;     /* display accent                      */
  --fs-5xl:3rem;     /* large display                       */
  --lh-tight:1.2;
  --lh-snug:1.4;
  --lh-body:1.7;

  /* ── motion ── */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.15s;
  --dur:.25s;
  --dur-slow:.5s;

  /* ── focus ring (one consistent ring everywhere) ── */
  --focus-ring:2px solid var(--brass);
  --focus-offset:3px;
}

/* Consistent, visible keyboard focus on every interactive element (a floor;
   pages may still add their own matching rules). */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

/* Shared responsive header behaviour — class names are identical across pages,
   so centralising this prevents the per-page drift that caused overflow.
   (Pages that intentionally hide .nav-link on mobile still win via their own
   display:none, since this only sets font-size.) */
@media (max-width:560px){
  .brand .urdu{display:none}
  .top-call span.lbl{display:none}
  .top-call{padding:var(--space-2) var(--space-3)}
  .nav-link{font-size:var(--fs-2xs)}
}

/* Any user who prefers reduced motion: neutralise transitions/animations
   site-wide as a floor, and make sure scroll-reveal content is shown even if
   its reveal never fires. Individual pages may still opt specific niceties in
   under (prefers-reduced-motion:no-preference). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1 !important;transform:none !important}
}