/* ══ DESIGN TOKENS ══ */
@font-face {
  font-family: 'AAL Maghribi';
  src: url('../assets/Font/AALMAGHRIBI_v4.9.6.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ── Greens / Forest ──────────────────────── */
  --moss-lt:        #eff4ec;   /*  */
  --rosybrown:      #D7BBBA;   /*  */
  --forest:         #0a1e24;   /* darkest base green  */
  --forest-md:      #0f3d48;   /* mid green           */
  --forest-lt:      #1a5566;   /* light forest        */
  --forest-deep:    #1a2a22;   /* deep forest: calendar panel, tooltips */
  --forest-ink:     #1c201e;   /* charcoal green: near-black surface    */
  --forest-web:     #0d1f16;   /* browser theme-color meta */ 

  /* ── Golds ────────────────────────────────── */
  --gold:           #a8842a;   /* base gold           */
  --gold-lt:        #c9a040;   /* light gold          */
  --gold-bright:    #d4a017;   /* accent gold         */

  /* ── Creams / Warm Whites ─────────────────── */
  --sand:           #f9f5ef;   /* lightest warm white */
  --white:          #f4f0e6;   /* warm white          */
  --cream:          #e8e1d0;   /* base cream          */
  --cream-lt:       #ede8d8;   /* light cream         */
  --cream-dk:       #cfc8b4;   /* dark cream          */
  --tan:            #d8caa4;   /* warm tan            */
  --khaki:          #c8bd96;   /* warm khaki          */
  --khaki-dk:       #d8d0b9;   /* dark khaki          */

  /* ── Blues / Slates ───────────────────────── */
  --blue-slate:     #2a6e7a;   /* base blue-slate     */
  --blue-slate-lt:  #6ab0bc;   /* light blue-slate    */
  --slate:          #4a8a96;   /* mid teal-slate      */
  --silver:         #aebbc5;   /* silver-blue         */
  --steel-slate:    #414e56;   /* steel: active rows, card-gold bg, ticker  */
  --mid-slate:      #4e5e6f;   /* mid-slate: card-teal bg, ticker dot       */
  --steel-blue:     #244f68;   /* deep steel blue (reserve)                 */
  --teal-slate:     #315f68;   /* teal slate (reserve)                      */
  --navy:           #201846;   /* navy (reserve)                       */
  --navy-deep:      #09012f;   /* deep navy (reserve)                       */

  /* ── Inks / Darks ─────────────────────────── */
  --ink:            #18181a;   /* base ink            */
  --ink-md:         #2a2a2e;   /* mid ink             */
  --ink-lt:         #68686e;   /* light ink           */
  --abyss:          #111514;   /* near-black: darkest card bg, shadow base  */
  --dark-plain:     #2d3535;   /* mid-dark: card-plain background           */

  /* ── Frosts (cool whites — UI on dark) ───── */
  --frost:          #e4ebf6;   /* cool white: text & bg on dark surfaces    */
  --frost-lt:       #f2f5fb;   /* lightest frost: prayer section background */
  --frost-md:       #d8e2f0;   /* mid frost: hover states                   */
  --frost-pure:     #f3f7fd;   /* purest frost: app overlays                */
  --teal-mist:      rgba(176, 204, 210, 0.855); /* soft teal: connect link text */

  /* ── Functional ───────────────────────────── */
  --yt-red:         #ff0000;   /* YouTube brand red                         */
  --success:        #2a7a4a;   /* form success state                        */
  --error:          #b83232;   /* form error state                          */
  --pulse:          #dc0050;   /* notification pulse ring (used at opacity) */

  /* ── Typography ──────────────────────────── */
  --serif: 'Amiri', serif;
  --serif-calligraphy: 'AAL Maghribi', 'Amiri', serif;
  --sans:  'Poppins', sans-serif;
  --cond:  'Saira Condensed', 'Poppins', sans-serif;
  --jura:  'Jura', sans-serif;
}

/* ══ SCROLLBARS — global rule, applies to every scroll area ══ */
* {
  scrollbar-width: thin;                               /* Firefox + new Chrome */
  scrollbar-color: rgb(78 94 111 / .75) transparent;   /* thumb, track — mid-slate */
}
*::-webkit-scrollbar {                                 /* older Chrome / Edge / Safari */
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgb(78 94 111 / .75);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgb(78 94 111 / 1);
}

/* ══ RESET ══ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* overflow-x: clip on html+body kills any horizontal pan / right-edge "white
   space" from stray content overflow WITHOUT turning html into a scroll
   container (which `hidden` would, breaking position:sticky). */
html {
  scroll-behavior: auto;
  overflow-x: clip;
}
body {
  background: var(--frost-pure);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: clip;
  max-width: 100%;
}
[lang="ar"],
[dir="rtl"],
.arabic {
  font-family: var(--serif);
  letter-spacing: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
}

/* ══ INNER CONTAINER ══ */
.inner {
  max-width: 1400px;
  margin-inline: auto;
  width: 100%;
  padding-inline: 4rem;
}