/* ============================================================
   أرشي إنجيلوس — Design Tokens
   Palette drawn from illuminated manuscripts: lamp-black ink,
   aged parchment, antique gold leaf, oxblood rubric ink, bronze.
   ============================================================ */
:root{
  --ink-950:#0a0603;
  --ink-900:#120b06;
  --ink-800:#1b120a;
  --ink-700:#28190f;
  --parchment:#efe3c8;
  --parchment-dim:#d9caa4;
  --gold-100:#f3d98a;
  --gold-300:#e8c766;
  --gold-500:#c9a227;
  --gold-700:#8a6d1f;
  --oxblood-500:#7a2323;
  --oxblood-700:#4a1414;
  --bronze-500:#8a6d3b;
  --ink-line: rgba(239,227,200,0.12);

  --font-display: "Aref Ruqaa", "Amiri", serif;
  --font-body: "Cairo", "Tajawal", sans-serif;
  --font-caption: "Cairo", sans-serif;

  --ease-silk: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .22s;
  --dur-med: .5s;
  --dur-slow: 1.1s;

  --radius-md: 10px;
  --radius-lg: 20px;
  --shadow-gold: 0 0 24px rgba(201,162,39,.35);
  --shadow-deep: 0 20px 60px rgba(0,0,0,.55);

  --nav-h: 68px;
  color-scheme: dark;

  --transition-theme: background .5s var(--ease-silk), color .5s var(--ease-silk), border-color .5s var(--ease-silk);
}

/* ---------- Light / day mode ---------- */
:root[data-theme="light"]{
  color-scheme: light;
  --ink-950:#f6f1e2;
  --ink-900:#efe7d2;
  --ink-800:#e6dcc0;
  --ink-700:#dccfab;
  --parchment:#2a1c0f;
  --parchment-dim:#5a4a34;
  --ink-line: rgba(42,28,15,.14);
  --shadow-deep: 0 20px 50px rgba(90,70,30,.18);
}
:root[data-theme="light"] body{
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,162,39,.14), transparent 55%),
    var(--ink-950);
}
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4{ color:var(--oxblood-700); }
:root[data-theme="light"] .btn{ color:#241408; }
:root[data-theme="light"] .btn.ghost{ color:var(--parchment); }
:root[data-theme="light"] ::-webkit-scrollbar-track{ background:var(--ink-950); }

body,
.site-header,
.card,
.circle-card .ring,
.install-card,
.ios-sheet-panel,
.verse-block,
.quiz-option,
.icon-btn,
.toast{
  transition: var(--transition-theme);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,162,39,.08), transparent 55%),
    var(--ink-950);
  color:var(--parchment);
  font-family:var(--font-body);
  direction:rtl;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--gold-100);
  margin:0 0 .4em;
  font-weight:700;
  letter-spacing:.01em;
}
p{ line-height:1.9; color:var(--parchment-dim); margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:var(--gold-500); color:var(--ink-950); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--ink-950); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold-700),var(--gold-500)); border-radius:10px; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-caption);
  font-size:.78rem;
  letter-spacing:.28em;
  color:var(--gold-500);
  text-transform:uppercase;
}
.divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, var(--gold-700), transparent);
  margin:2.5rem 0;
  position:relative;
}
.divider::before{
  content:"";
  position:absolute; top:50%; left:50%;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-500);
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:var(--shadow-gold);
}

.btn{
  --btn-bg: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.9em;
  border-radius:999px;
  border:1px solid rgba(232,199,102,.5);
  background:var(--btn-bg);
  color:var(--ink-950);
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-silk);
  will-change:transform;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-silk);
  z-index:1;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-gold); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0) scale(.96); transition-duration:.08s; }
.btn.ghost{
  background:transparent;
  color:var(--parchment);
  border-color:var(--ink-line);
}
.btn.ghost:hover{ border-color:var(--gold-500); color:var(--gold-100); box-shadow:none; }
.btn.small{ padding:.55em 1.2em; font-size:.82rem; }

.cursor-glow{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(201,162,39,.06), transparent 60%);
  transition:background .12s linear;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}