/* quran.com-aligned theme tokens (v3) */
:root{
  /* Primary reading column — golden range 1140–1280px */
  --page-max:1200px;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-alt:#f4f5f6;
  --ink:#272727;
  --ink-soft:#666666;
  --muted:#868e96;
  --faint:#ced4da;
  --accent:#279493;
  --accent-deep:#217e82;
  --accent-soft:#ebf9fa;
  --accent-faint:#c2edef;
  --border:#ebeef0;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --ring:rgba(39,148,147,.22);
  --shadow-tooltip:0 4px 8px rgba(0,0,0,.12);
}
/* Reserve scrollbar width so centered layout / topbar do not jump
   when navigating index ↔ chapters (or when overflow appears). */
html{
  scrollbar-gutter:stable;
  /* clip (not hidden) so position:sticky still works */
  overflow-x:clip;
  max-width:100%;
}
body{
  overflow-x:clip;
  max-width:100%;
  overscroll-behavior-x:none;
}
html[data-theme="light"]{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-alt:#f4f5f6;
  --ink:#272727;
  --ink-soft:#666666;
  --muted:#868e96;
  --faint:#ced4da;
  --accent:#279493;
  --accent-deep:#217e82;
  --accent-soft:#ebf9fa;
  --accent-faint:#c2edef;
  --border:#ebeef0;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --ring:rgba(39,148,147,.22);
  --shadow-tooltip:0 4px 8px rgba(0,0,0,.12);
}
html[data-theme="dark"]{
  --bg:#1f2125;
  --surface:#1f2125;
  --surface-alt:#343a40;
  --ink:#e7e9ea;
  --ink-soft:#dee2e6;
  --muted:#9b9b9b;
  --faint:#495057;
  --accent:#279493;
  --accent-deep:#217e82;
  --accent-soft:#272f33;
  --accent-faint:#3d474d;
  --border:#464b50;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --ring:rgba(39,148,147,.28);
  --shadow-tooltip:0 4px 4px rgba(0,0,0,.25);
}
html[data-theme="paper"]{
  --bg:#f4ecd9;
  --surface:#fbf6e8;
  --surface-alt:#efe4c8;
  --ink:#33291a;
  --ink-soft:#564a30;
  --muted:#8f8266;
  --faint:#d9cdad;
  --accent:#217e82;
  --accent-deep:#1c6a6d;
  --accent-soft:#e4f4f5;
  --accent-faint:#c2edef;
  --border:#e4d8bb;
  --shadow:0 1px 2px rgba(80,60,20,.06), 0 8px 24px rgba(80,60,20,.08);
  --ring:rgba(33,126,130,.18);
  --shadow-tooltip:0 4px 8px rgba(80,60,20,.12);
}