/* ═══════════════════════════════════════════════════════════════════════════
   styles/mushaf-papers.css — Mithlayn · Phase 4d mushaf paper system
   ─────────────────────────────────────────────────────────────────────────
   TWO-LAYER ARCHITECTURE:

   1. DEFAULT layer — `html[data-ui="X"] .mushaf-shell` rules below set the
      mushaf paper based on the active site theme's brightness label:
         light site themes → ivory paper (warm cream, deep brown ink)
         dark site themes  → night paper (pure black, warm cream ink)
      The 28 site themes (mode field in modules/topbar/theme-picker.js)
      are each classified here — single source of truth. Adding a new
      site theme means adding its id to one of the two lists.

   2. OVERRIDE layer — `html .mushaf-shell[data-paper-theme="M-X"]` blocks
      below win over the brightness default when the user has explicitly
      picked a paper from the chrome's settings wrench. Same selectors
      cover .ed-paper-disc so the picker swatches preview the right color.

   Tokens consumed by mushaf.css:
     --mu-paper       page background
     --mu-ink         glyph color (Arabic ink)
     --mu-medallion   verse-end medallion fill
     --mu-accent      page border / banner / page-number accent
     --mu-rim         soft hairline inside the paper

   :root defaults alias to --ms-* for renderer-only contexts (no chrome).

   Hex literals here are allowed per rule A2: the hex IS the token value
   inside a per-theme selector block.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mu-paper:     var(--ms-paper);
  --mu-ink:       var(--ms-ink-4);
  --mu-medallion: var(--ms-gold);
  --mu-accent:    var(--ms-gold-rim);
  --mu-rim:       var(--ms-paper-rim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT LAYER · site-theme-driven brightness
   ═══════════════════════════════════════════════════════════════════════════ */

/* LIGHT site themes (12) → Ivory paper */
html[data-ui="mushaf"]     .mushaf-shell,
html[data-ui="medina"]     .mushaf-shell,
html[data-ui="notion"]     .mushaf-shell,
html[data-ui="tarteel"]    .mushaf-shell,
html[data-ui="qcom-light"] .mushaf-shell,
html[data-ui="arc"]        .mushaf-shell,
html[data-ui="material"]   .mushaf-shell,
html[data-ui="ia"]         .mushaf-shell,
html[data-ui="madinah"]    .mushaf-shell,
html[data-ui="ottoman"]    .mushaf-shell,
html[data-ui="alhambra"]   .mushaf-shell,
html[data-ui="zamzam"]     .mushaf-shell {
  --mu-paper:     #f3e9ce;
  --mu-ink:       #1a1408;
  --mu-medallion: #a87420;
  --mu-accent:    #b8923a;
  --mu-rim:       #e4d8b6;
}

/* DARK site themes (17: classic + 16 dark grp/cliffs) → Night paper */
html[data-ui="classic"]      .mushaf-shell,
html[data-ui="qcom-dark"]    .mushaf-shell,
html[data-ui="ramadan"]      .mushaf-shell,
html[data-ui="vision"]       .mushaf-shell,
html[data-ui="muslimpro"]    .mushaf-shell,
html[data-ui="linear"]       .mushaf-shell,
html[data-ui="vercel"]       .mushaf-shell,
html[data-ui="terminal"]     .mushaf-shell,
html[data-ui="notion-dark"]  .mushaf-shell,
html[data-ui="kiswah"]       .mushaf-shell,
html[data-ui="cosmic"]       .mushaf-shell,
html[data-ui="cosmic-warm"]  .mushaf-shell,
html[data-ui="cosmic-cool"]  .mushaf-shell,
html[data-ui="cosmic-bal"]   .mushaf-shell,
html[data-ui="ambient-soft"] .mushaf-shell,
html[data-ui="ambient-lit"]  .mushaf-shell,
html[data-ui="ambient-deep"] .mushaf-shell {
  --mu-paper:     #0a0a0a;
  --mu-ink:       #ede2c2;
  --mu-medallion: #c4a04a;
  --mu-accent:    #b88c2e;
  --mu-rim:       #2a2a26;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERRIDE LAYER · explicit user picks from the settings picker
   Placed AFTER the default layer so equal-specificity rules win on source
   order. Same selectors cover .ed-paper-disc so picker swatches preview.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Light + cream */
html .mushaf-shell[data-paper-theme="M-madinah"],
.ed-paper-disc[data-paper-theme="M-madinah"] {
  --mu-paper:     #f7f1de;
  --mu-ink:       #1a1408;
  --mu-medallion: #b88c2e;
  --mu-accent:    #c4a04a;
  --mu-rim:       #e7dfc3;
}
html .mushaf-shell[data-paper-theme="M-paper-white"],
.ed-paper-disc[data-paper-theme="M-paper-white"] {
  --mu-paper:     #fefefb;
  --mu-ink:       #0a0a0a;
  --mu-medallion: #a07b22;
  --mu-accent:    #b18e34;
  --mu-rim:       #e6e6e0;
}
html .mushaf-shell[data-paper-theme="M-ivory"],
.ed-paper-disc[data-paper-theme="M-ivory"] {
  --mu-paper:     #f3e9ce;
  --mu-ink:       #1a1408;
  --mu-medallion: #a87420;
  --mu-accent:    #b8923a;
  --mu-rim:       #e4d8b6;
}
html .mushaf-shell[data-paper-theme="M-pakistani"],
.ed-paper-disc[data-paper-theme="M-pakistani"] {
  --mu-paper:     #f7e8de;
  --mu-ink:       #1a1408;
  --mu-medallion: #8b4a1f;
  --mu-accent:    #a06334;
  --mu-rim:       #ebd4c4;
}
html .mushaf-shell[data-paper-theme="M-mint-paper"],
.ed-paper-disc[data-paper-theme="M-mint-paper"] {
  --mu-paper:     #eaf0e2;
  --mu-ink:       #0e1a0e;
  --mu-medallion: #3e5a3a;
  --mu-accent:    #56743f;
  --mu-rim:       #cfdcc3;
}

/* Warm + aged */
html .mushaf-shell[data-paper-theme="M-bulaq"],
.ed-paper-disc[data-paper-theme="M-bulaq"] {
  --mu-paper:     #e0c890;
  --mu-ink:       #211a08;
  --mu-medallion: #5e3a0e;
  --mu-accent:    #7a4a16;
  --mu-rim:       #c8af74;
}

/* Dark */
html .mushaf-shell[data-paper-theme="M-night"],
.ed-paper-disc[data-paper-theme="M-night"] {
  --mu-paper:     #0a0a0a;
  --mu-ink:       #ede2c2;
  --mu-medallion: #c4a04a;
  --mu-accent:    #b88c2e;
  --mu-rim:       #2a2a26;
}
html .mushaf-shell[data-paper-theme="M-navy-luxe"],
.ed-paper-disc[data-paper-theme="M-navy-luxe"] {
  --mu-paper:     #0e1a36;
  --mu-ink:       #f3eddb;
  --mu-medallion: #c4a04a;
  --mu-accent:    #a8b0c8;
  --mu-rim:       #1f2d4d;
}
html .mushaf-shell[data-paper-theme="M-forest-gold"],
.ed-paper-disc[data-paper-theme="M-forest-gold"] {
  --mu-paper:     #0f2418;
  --mu-ink:       #f3e8c8;
  --mu-medallion: #d4b04a;
  --mu-accent:    #8eaa7a;
  --mu-rim:       #1f3d2c;
}
html .mushaf-shell[data-paper-theme="M-blueprint"],
.ed-paper-disc[data-paper-theme="M-blueprint"] {
  --mu-paper:     #1a2e4d;
  --mu-ink:       #f2f0e8;
  --mu-medallion: #b88c2e;
  --mu-accent:    #8ea8d0;
  --mu-rim:       #2e4a72;
}