/* MuslimTech shared design system — "calm through emptiness"
   Quran.com/Tarteel restraint: cream space, Amiri as the star, geometry as a
   whisper, gold as a single jewel accent (never text). Linked on every page
   alongside theme.js. Base + tokens + components + accessibility. */

:root{
  --cream:#faf6ee;
  --emerald:#059669;
  --emerald-700:#047857;
  --gold:#d4af37;
  --ink:#053b2c;
  --muted:#5b6b62;
}

html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Arabic / Qur'an text and RTL all lean on Amiri */
.arabic{font-family:'Amiri',serif}
.amiri{font-family:'Amiri',serif}
[dir="rtl"] body, [dir="rtl"] .arabic-aware{font-family:'Amiri',Inter,serif}

/* One gentle light from the very top of the page, fading into cream.
   No hard band between the hero zone and the rest of the page. */
.toplight{
  position:absolute; top:0; left:0; right:0; height:820px;
  z-index:0; pointer-events:none;
  background:radial-gradient(125% 70% at 50% -10%,
    rgba(224,180,60,.30), rgba(212,175,55,.10) 40%, rgba(250,246,238,0) 72%);
}

/* Soft surfaces, used sparingly — jewelry, not wallpaper */
.soft{box-shadow:0 14px 40px rgba(2,44,34,.08)}
.ring-soft{box-shadow:0 0 0 1px rgba(5,150,105,.12)}

/* The old sky-blue gradient is gone. The emphasis word in the headline is now
   solid deep emerald. (Class name kept so the i18n strings need no edits.) */
.gradient-text{
  background:none; -webkit-text-fill-color:currentColor; color:var(--emerald-700);
}

/* Primary action — one obvious button per screen */
.btn-primary{
  display:inline-block; background:var(--emerald); color:#fff;
  font-weight:500; border-radius:14px; padding:15px 32px; text-decoration:none;
}
.btn-primary:hover{background:var(--emerald-700)}
.btn-quiet{color:var(--emerald-700); font-weight:500; text-decoration:none}
.btn-quiet:hover{text-decoration:underline}

/* Tools as quiet, scannable rows */
.tool-row{
  display:flex; align-items:center; gap:22px; padding:28px 8px;
  border-top:1px solid rgba(5,59,44,.10); text-decoration:none; color:inherit;
}
.tool-row:last-child{border-bottom:1px solid rgba(5,59,44,.10)}
.tool-icon{
  flex:0 0 auto; width:48px; height:48px; border-radius:12px;
  background:rgba(5,150,105,.10); color:var(--emerald-700);
  display:grid; place-content:center; font-size:22px;
}

.fade-up{opacity:0; transform:translateY(12px); animation:fadeUp .7s ease forwards}
.delay-1{animation-delay:.08s}.delay-2{animation-delay:.16s}.delay-3{animation-delay:.24s}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}

/* Scroll-reveal: sections rise gently into view as you scroll. JS adds .in
   via IntersectionObserver; the no-JS / no-observer fallback shows everything. */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* Accessibility: respect reduced-motion (net-new) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .fade-up{opacity:1; transform:none}
  .reveal{opacity:1; transform:none}
}