/* ════════════════════════════════════════════════════════════════════════
   styles/themes.css — v187-isk7 · single source of truth for the 14
   curated themes. Replaces the layered shared-themes.css + main.css
   light-overrides + tokens.css light-block stack.

   EACH theme block sets EVERY token the rest of the codebase reads:

   • --bg / --bg-1/2/3 ............ page + surface tiers
   • --cream / -dim / -faint ...... ink tiers (cream is a misnomer kept
                                    for the legacy CSS; in light themes
                                    it's the dark ink color)
   • --gold / -lt / -bg / -bdr .... accent + variants
   • --border / --border-mid ...... hairline tiers
   • --ms-bg / -1/2/3 ............. main.css / manuscript.css surfaces
   • --ms-ink / -2 / -3 ........... main.css / manuscript.css ink
   • --ms-hair / -2 / -3 .......... main.css / manuscript.css hairlines
   • --ms-mint / -soft / -rim ..... main.css / manuscript.css accent

   Image-based themes (cosmic-* / ambient-*) add their body backdrop
   via body::before scoped to data-ui.

   Loaded AFTER every other stylesheet in index.html so it wins the
   cascade unconditionally. Specificity html[data-ui="X"] = 0-1-1.
   ──────────────────────────────────────────────────────────────────── */

/* ── 1 · MUSHAF — warm parchment, deep ink, forest-green accent ──────
   v188-isk5 · WCAG AA · --gold-lt darkened from #2d8050 (4.13:1) to
   #1f6038 (5.41:1). --gold unchanged (already 5.42:1). Forest-green
   identity preserved, just deeper saturation. */
html[data-ui="mushaf"]{
  --bg:#f4ecd8; --bg-1:#faf3df; --bg-2:#ede2c5; --bg-3:#e0d2af;
  --cream:#2d2418; --cream-dim:#5a4a35; --cream-faint:#8a7858;
  --gold:#1e6b3f; --gold-lt:#1f6038;
  --gold-bg:rgba(30,107,63,0.08); --gold-bdr:rgba(30,107,63,0.35);
  --border:rgba(60,40,20,0.30); --border-mid:rgba(60,40,20,0.55);
  --ms-bg:#f4ecd8; --ms-bg-1:#ede2c5; --ms-bg-2:#e0d2af; --ms-bg-3:#d4c498;
  --ms-ink:#2d2418; --ms-ink-2:#5a4a35; --ms-ink-3:#8a7858; --ms-ink-4:#b0a085;
  --ms-hair:rgba(58,32,16,0.18); --ms-hair-2:rgba(58,32,16,0.30); --ms-hair-3:rgba(58,32,16,0.45);
  --ms-mint:#1e6b3f; --ms-mint-2:#1f6038;
  --ms-mint-soft:rgba(30,107,63,0.08); --ms-mint-rim:rgba(30,107,63,0.32);
  --ms-glass-bg:rgba(255,252,244,0.78); --ms-glass-bg-2:rgba(248,245,235,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 0.5px rgba(58,52,43,0.10);
}
html[data-ui="mushaf"] body{
  background:#f4ecd8;
  color:#2d2418;
  font-family:'Amiri','Lora',Georgia,serif;
}

/* ── 2 · MEDINA — softer cream, wine accent, Lora serif body ────────── */
html[data-ui="medina"]{
  --bg:#f5ead4; --bg-1:#faf1de; --bg-2:#ecdec1; --bg-3:#dfcda3;
  --cream:#2e1f14; --cream-dim:#614a35; --cream-faint:#8f7a5e;
  --gold:#7c2d3a; --gold-lt:#9b3f4c;
  --gold-bg:rgba(124,45,58,0.08); --gold-bdr:rgba(124,45,58,0.30);
  --border:rgba(90,30,40,0.22); --border-mid:rgba(90,30,40,0.45);
  --ms-bg:#f5ead4; --ms-bg-1:#ecdec1; --ms-bg-2:#dfcda3; --ms-bg-3:#d2bd8a;
  --ms-ink:#2e1f14; --ms-ink-2:#614a35; --ms-ink-3:#8f7a5e; --ms-ink-4:#b8a685;
  --ms-hair:rgba(90,30,40,0.14); --ms-hair-2:rgba(90,30,40,0.26); --ms-hair-3:rgba(90,30,40,0.42);
  --ms-mint:#7c2d3a; --ms-mint-2:#9b3f4c;
  --ms-mint-soft:rgba(124,45,58,0.08); --ms-mint-rim:rgba(124,45,58,0.30);
  --ms-glass-bg:rgba(255,250,238,0.80); --ms-glass-bg-2:rgba(248,242,225,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 0.5px rgba(90,30,40,0.10);
}
html[data-ui="medina"] body{
  background:#f5ead4;
  color:#2e1f14;
  font-family:'Lora','Amiri',Georgia,serif;
}

/* ── 3 · NOTION — clean white, near-black ink, blue accent ───────────
   v188-isk5 · WCAG AA · darkened --gold/-lt from #2383e2/#4a9eea to
   #0d47a1/#1565c0 (Material blue 900/800) so accent text on white
   meets 4.5:1 (was 3.88/2.85). --cream-faint lifted from #9b9a97
   (2.81:1) to #8a8884 (3.51:1). --cream-dim from #787774 (4.48:1) to
   #5f5e5b (6.42:1). Hue retained; Notion-brand-recognizable. */
html[data-ui="notion"]{
  --bg:#ffffff; --bg-1:#f7f6f3; --bg-2:#efeee9; --bg-3:#e6e4de;
  --cream:#37352f; --cream-dim:#5f5e5b; --cream-faint:#8a8884;
  --gold:#0d47a1; --gold-lt:#1565c0;
  --gold-bg:rgba(13,71,161,0.10); --gold-bdr:rgba(13,71,161,0.30);
  --border:rgba(55,53,47,0.14); --border-mid:rgba(55,53,47,0.28);
  --ms-bg:#ffffff; --ms-bg-1:#f7f6f3; --ms-bg-2:#efeee9; --ms-bg-3:#e6e4de;
  --ms-ink:#37352f; --ms-ink-2:#4a4944; --ms-ink-3:#5f5e5b; --ms-ink-4:#8a8884;
  --ms-hair:rgba(55,53,47,0.09); --ms-hair-2:rgba(55,53,47,0.16); --ms-hair-3:rgba(55,53,47,0.28);
  --ms-mint:#0d47a1; --ms-mint-2:#1565c0;
  --ms-mint-soft:rgba(13,71,161,0.08); --ms-mint-rim:rgba(13,71,161,0.28);
  --ms-glass-bg:rgba(255,255,255,0.85); --ms-glass-bg-2:rgba(252,251,248,0.95);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(55,53,47,0.09);
}
html[data-ui="notion"] body{
  background:#ffffff;
  color:#37352f;
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── 4 · TARTEEL — pale lavender, indigo accent, airy spacing ────────
   v188-isk5 · WCAG AA · --cream-faint lifted from #9898ac (2.74:1) to
   #7a7a90 (3.95:1). --gold-lt darkened from #6366f1 (4.32:1) to
   #4f53d5 (5.32:1). Body ink unchanged. */
html[data-ui="tarteel"]{
  --bg:#fbfbfd; --bg-1:#ffffff; --bg-2:#f4f4f8; --bg-3:#e8e8f0;
  --cream:#1e1e2e; --cream-dim:#64647a; --cream-faint:#7a7a90;
  --gold:#4338ca; --gold-lt:#4f53d5;
  --gold-bg:rgba(67,56,202,0.08); --gold-bdr:rgba(67,56,202,0.25);
  --border:rgba(30,30,60,0.10); --border-mid:rgba(30,30,60,0.22);
  --ms-bg:#fbfbfd; --ms-bg-1:#f4f4f8; --ms-bg-2:#e8e8f0; --ms-bg-3:#dadae6;
  --ms-ink:#1e1e2e; --ms-ink-2:#3e3e54; --ms-ink-3:#64647a; --ms-ink-4:#7a7a90;
  --ms-hair:rgba(30,30,60,0.06); --ms-hair-2:rgba(30,30,60,0.12); --ms-hair-3:rgba(30,30,60,0.22);
  --ms-mint:#4338ca; --ms-mint-2:#4f53d5;
  --ms-mint-soft:rgba(67,56,202,0.08); --ms-mint-rim:rgba(67,56,202,0.25);
  --ms-glass-bg:rgba(251,251,253,0.86); --ms-glass-bg-2:rgba(245,245,250,0.94);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(30,30,60,0.06);
}
html[data-ui="tarteel"] body{
  background:#fbfbfd;
  color:#1e1e2e;
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── 5 · QURAN.COM DARK — charcoal, cyan ────────────────────────────── */
html[data-ui="qcom-dark"]{
  --bg:#0f1417; --bg-1:#161c20; --bg-2:#1e2529; --bg-3:#2a3136;
  --cream:#e8e6e1; --cream-dim:#9fa5a8; --cream-faint:#636a6e;
  --gold:#40c4cc; --gold-lt:#5fd8de;
  --gold-bg:rgba(64,196,204,0.10); --gold-bdr:rgba(64,196,204,0.28);
  --border:rgba(255,255,255,0.05); --border-mid:rgba(255,255,255,0.10);
  --ms-bg:#0f1417; --ms-bg-1:#161c20; --ms-bg-2:#1e2529; --ms-bg-3:#2a3136;
  --ms-ink:#e8e6e1; --ms-ink-2:#bcbcb6; --ms-ink-3:#9fa5a8; --ms-ink-4:#636a6e;
  --ms-hair:rgba(255,255,255,0.05); --ms-hair-2:rgba(255,255,255,0.10); --ms-hair-3:rgba(255,255,255,0.18);
  --ms-mint:#40c4cc; --ms-mint-2:#5fd8de;
  --ms-mint-soft:rgba(64,196,204,0.10); --ms-mint-rim:rgba(64,196,204,0.28);
  --ms-glass-bg:rgba(22,28,32,0.78); --ms-glass-bg-2:rgba(30,37,41,0.88);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 0.5px rgba(255,255,255,0.05);
}
html[data-ui="qcom-dark"] body{
  background:#0f1417;
  color:#e8e6e1;
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── 6 · RAMADAN NIGHTS — night sky, gold + violet radials, lantern ── */
html[data-ui="ramadan"]{
  --bg:#0a0b1f; --bg-1:#14162e; --bg-2:#1e2040; --bg-3:#2a2d52;
  --cream:#f0ebd8; --cream-dim:#b5ae93; --cream-faint:#6e6a55;
  --gold:#e6b45a; --gold-lt:#f5cc75;
  --gold-bg:rgba(230,180,90,0.10); --gold-bdr:rgba(230,180,90,0.30);
  --border:rgba(230,180,90,0.10); --border-mid:rgba(230,180,90,0.22);
  --ms-bg:#0a0b1f; --ms-bg-1:#14162e; --ms-bg-2:#1e2040; --ms-bg-3:#2a2d52;
  --ms-ink:#f0ebd8; --ms-ink-2:#c8c0a8; --ms-ink-3:#b5ae93; --ms-ink-4:#6e6a55;
  --ms-hair:rgba(230,180,90,0.10); --ms-hair-2:rgba(230,180,90,0.18); --ms-hair-3:rgba(230,180,90,0.30);
  --ms-mint:#e6b45a; --ms-mint-2:#f5cc75;
  --ms-mint-soft:rgba(230,180,90,0.10); --ms-mint-rim:rgba(230,180,90,0.30);
  --ms-glass-bg:rgba(20,22,46,0.78); --ms-glass-bg-2:rgba(30,32,64,0.88);
  --ms-glass-rim:inset 0 1px 0 rgba(230,180,90,0.10), inset 0 0 0 0.5px rgba(230,180,90,0.08);
}
html[data-ui="ramadan"] body{
  background:
    radial-gradient(ellipse at 15% 20%, rgba(230,180,90,0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 70%, rgba(92,70,180,0.15) 0%, transparent 45%),
    linear-gradient(180deg, #0a0b1f 0%, #14162e 100%);
  background-attachment:fixed;
  color:#f0ebd8;
  font-family:-apple-system,'Inter',sans-serif;
}

/* ── 7 · VISION PRO — glassy translucent dark, cyan accent ──────────── */
html[data-ui="vision"]{
  --bg:#050a14;
  --bg-1:rgba(255,255,255,0.04); --bg-2:rgba(255,255,255,0.06); --bg-3:rgba(255,255,255,0.10);
  --cream:#ffffff; --cream-dim:rgba(255,255,255,0.72); --cream-faint:rgba(255,255,255,0.45);
  --gold:#64d2ff; --gold-lt:#a5e8ff;
  --gold-bg:rgba(100,210,255,0.14); --gold-bdr:rgba(100,210,255,0.35);
  --border:rgba(255,255,255,0.08); --border-mid:rgba(255,255,255,0.14);
  --ms-bg:#050a14; --ms-bg-1:rgba(255,255,255,0.04); --ms-bg-2:rgba(255,255,255,0.06); --ms-bg-3:rgba(255,255,255,0.10);
  --ms-ink:#ffffff; --ms-ink-2:rgba(255,255,255,0.85); --ms-ink-3:rgba(255,255,255,0.72); --ms-ink-4:rgba(255,255,255,0.45);
  --ms-hair:rgba(255,255,255,0.08); --ms-hair-2:rgba(255,255,255,0.14); --ms-hair-3:rgba(255,255,255,0.22);
  --ms-mint:#64d2ff; --ms-mint-2:#a5e8ff;
  --ms-mint-soft:rgba(100,210,255,0.14); --ms-mint-rim:rgba(100,210,255,0.35);
  --ms-glass-bg:rgba(255,255,255,0.06); --ms-glass-bg-2:rgba(255,255,255,0.10);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 0.5px rgba(255,255,255,0.08);
}
html[data-ui="vision"] body{
  background:
    radial-gradient(ellipse at top left, #1a2a52 0%, #050a14 55%),
    radial-gradient(ellipse at bottom right, #3a1a52 0%, #050a14 60%);
  background-blend-mode:screen;
  background-attachment:fixed;
  color:#ffffff;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── 8 · MUSLIM PRO — deep teal, gold ────────────────────────────────── */
html[data-ui="muslimpro"]{
  --bg:#0d3535; --bg-1:#134040; --bg-2:#1a4d4d; --bg-3:#235c5c;
  --cream:#f0ede3; --cream-dim:#b5b0a0; --cream-faint:#7a7a6e;
  --gold:#d4af37; --gold-lt:#e6c658;
  --gold-bg:rgba(212,175,55,0.12); --gold-bdr:rgba(212,175,55,0.35);
  --border:rgba(255,255,255,0.07); --border-mid:rgba(255,255,255,0.12);
  --ms-bg:#0d3535; --ms-bg-1:#134040; --ms-bg-2:#1a4d4d; --ms-bg-3:#235c5c;
  --ms-ink:#f0ede3; --ms-ink-2:#cdc8b8; --ms-ink-3:#b5b0a0; --ms-ink-4:#7a7a6e;
  --ms-hair:rgba(212,175,55,0.10); --ms-hair-2:rgba(212,175,55,0.20); --ms-hair-3:rgba(212,175,55,0.30);
  --ms-mint:#d4af37; --ms-mint-2:#e6c658;
  --ms-mint-soft:rgba(212,175,55,0.12); --ms-mint-rim:rgba(212,175,55,0.35);
  --ms-glass-bg:rgba(19,64,64,0.82); --ms-glass-bg-2:rgba(26,77,77,0.90);
  --ms-glass-rim:inset 0 1px 0 rgba(212,175,55,0.18), inset 0 0 0 0.5px rgba(212,175,55,0.10);
}
html[data-ui="muslimpro"] body{
  background:linear-gradient(180deg,#0d3535 0%,#103a3a 100%);
  background-attachment:fixed;
  color:#f0ede3;
  font-family:'Inter',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════════════════════════════════════════════
   v188-isk2 · ported themes (15-28) — previously lived only in
   shared-themes.css, which meant the --ms-* family was undefined for
   them and topbar / manuscript surfaces stayed dark-charcoal under any
   of these themes. Token sets only; per-theme chrome customisations
   (.hdr, .nav-btn, etc.) still live in shared-themes.css.
   ──────────────────────────────────────────────────────────────────── */

/* ── 15 · QURAN.COM LIGHT — warm off-white, teal accent ──────────────
   v188-isk5 · WCAG AA · darkened --gold from #2ca4ab (3.00:1) to
   #00695c (6.74:1) and --gold-lt from #3fb8bf (2.38:1) to #00796b
   (5.51:1). Material teal 800/700. Quran.com brand identity is teal-
   adjacent so palette family preserved. */
html[data-ui="qcom-light"]{
  --bg:#ffffff; --bg-1:#fafaf9; --bg-2:#f4f4f2; --bg-3:#e8e8e6;
  --cream:#1a1a1a; --cream-dim:#555555; --cream-faint:#8a8a8a;
  --gold:#00695c; --gold-lt:#00796b;
  --gold-bg:rgba(0,105,92,0.08); --gold-bdr:rgba(0,105,92,0.30);
  --border:rgba(25,50,50,0.07); --border-mid:rgba(25,50,50,0.12);
  --ms-bg:#ffffff; --ms-bg-1:#f4f4f2; --ms-bg-2:#e8e8e6; --ms-bg-3:#dadad6;
  --ms-ink:#1a1a1a; --ms-ink-2:#3a3a3a; --ms-ink-3:#555555; --ms-ink-4:#8a8a8a;
  --ms-hair:rgba(25,50,50,0.05); --ms-hair-2:rgba(25,50,50,0.10); --ms-hair-3:rgba(25,50,50,0.20);
  --ms-mint:#00695c; --ms-mint-2:#00796b;
  --ms-mint-soft:rgba(0,105,92,0.08); --ms-mint-rim:rgba(0,105,92,0.30);
  --ms-glass-bg:rgba(255,255,255,0.85); --ms-glass-bg-2:rgba(250,250,249,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(25,50,50,0.06);
}

/* ── 16 · LINEAR — graphite, electric indigo accent ──────────────────
   v188-isk5 · WCAG AA · dark theme — text needed LIGHTENING on the
   #08090a backdrop. --gold lifted from #5e6ad2 (4.24:1) to #7a85e0
   (5.30:1). --gold-lt unchanged (already passes). */
html[data-ui="linear"]{
  --bg:#08090a; --bg-1:#0f1011; --bg-2:#151617; --bg-3:#1e1f22;
  --cream:#f7f8f8; --cream-dim:#b4b8bf; --cream-faint:#6e7079;
  --gold:#7a85e0; --gold-lt:#8b93e8;
  --gold-bg:rgba(122,133,224,0.12); --gold-bdr:rgba(122,133,224,0.30);
  --border:rgba(255,255,255,0.06); --border-mid:rgba(255,255,255,0.09);
  --ms-bg:#08090a; --ms-bg-1:#0f1011; --ms-bg-2:#151617; --ms-bg-3:#1e1f22;
  --ms-ink:#f7f8f8; --ms-ink-2:#d8dbde; --ms-ink-3:#b4b8bf; --ms-ink-4:#6e7079;
  --ms-hair:rgba(255,255,255,0.05); --ms-hair-2:rgba(255,255,255,0.09); --ms-hair-3:rgba(255,255,255,0.16);
  --ms-mint:#7a85e0; --ms-mint-2:#8b93e8;
  --ms-mint-soft:rgba(122,133,224,0.12); --ms-mint-rim:rgba(122,133,224,0.30);
  --ms-glass-bg:rgba(8,9,10,0.72); --ms-glass-bg-2:rgba(15,16,17,0.85);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 0.5px rgba(255,255,255,0.04);
}

/* ── 17 · VERCEL — pure monochrome black, white accent ──────────────── */
html[data-ui="vercel"]{
  --bg:#000000; --bg-1:#0a0a0a; --bg-2:#111111; --bg-3:#1a1a1a;
  --cream:#ededed; --cream-dim:#a1a1a1; --cream-faint:#666666;
  --gold:#ffffff; --gold-lt:#ffffff;
  --gold-bg:rgba(255,255,255,0.05); --gold-bdr:rgba(255,255,255,0.20);
  --border:#1f1f1f; --border-mid:#2e2e2e;
  --ms-bg:#000000; --ms-bg-1:#0a0a0a; --ms-bg-2:#111111; --ms-bg-3:#1a1a1a;
  --ms-ink:#ededed; --ms-ink-2:#c4c4c4; --ms-ink-3:#a1a1a1; --ms-ink-4:#666666;
  --ms-hair:rgba(255,255,255,0.06); --ms-hair-2:rgba(255,255,255,0.12); --ms-hair-3:rgba(255,255,255,0.20);
  --ms-mint:#ffffff; --ms-mint-2:#ffffff;
  --ms-mint-soft:rgba(255,255,255,0.05); --ms-mint-rim:rgba(255,255,255,0.20);
  --ms-glass-bg:rgba(0,0,0,0.78); --ms-glass-bg-2:rgba(10,10,10,0.88);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 0.5px rgba(255,255,255,0.04);
}

/* ── 18 · TERMINAL — phosphor green on near-black ───────────────────── */
html[data-ui="terminal"]{
  --bg:#0a0e0a; --bg-1:#0f1510; --bg-2:#161e18; --bg-3:#1d281f;
  --cream:#c8e6c8; --cream-dim:#8ab38f; --cream-faint:#557a58;
  --gold:#00d97e; --gold-lt:#40ff9d;
  --gold-bg:rgba(0,217,126,0.10); --gold-bdr:rgba(0,217,126,0.35);
  --border:rgba(0,255,130,0.12); --border-mid:rgba(0,255,130,0.22);
  --ms-bg:#0a0e0a; --ms-bg-1:#0f1510; --ms-bg-2:#161e18; --ms-bg-3:#1d281f;
  --ms-ink:#c8e6c8; --ms-ink-2:#a8caa8; --ms-ink-3:#8ab38f; --ms-ink-4:#557a58;
  --ms-hair:rgba(0,255,130,0.10); --ms-hair-2:rgba(0,255,130,0.18); --ms-hair-3:rgba(0,255,130,0.30);
  --ms-mint:#00d97e; --ms-mint-2:#40ff9d;
  --ms-mint-soft:rgba(0,217,126,0.10); --ms-mint-rim:rgba(0,217,126,0.35);
  --ms-glass-bg:rgba(10,14,10,0.78); --ms-glass-bg-2:rgba(15,21,16,0.88);
  --ms-glass-rim:inset 0 1px 0 rgba(0,255,130,0.08), inset 0 0 0 0.5px rgba(0,255,130,0.06);
}

/* ── 19 · ARC — soft lavender, purple accent ─────────────────────────
   v188-isk5 · WCAG AA · --gold-lt darkened from #7e5bd0 (4.24:1) to
   #6a47b8 (5.31:1). --gold unchanged (passes already). */
html[data-ui="arc"]{
  --bg:#f2ecff; --bg-1:#ffffff; --bg-2:#ebe3fe; --bg-3:#ded0fd;
  --cream:#1a1428; --cream-dim:#4a3d6b; --cream-faint:#8478a3;
  --gold:#6b46c1; --gold-lt:#6a47b8;
  --gold-bg:rgba(107,70,193,0.08); --gold-bdr:rgba(107,70,193,0.22);
  --border:rgba(88,51,176,0.08); --border-mid:rgba(88,51,176,0.16);
  --ms-bg:#f2ecff; --ms-bg-1:#ebe3fe; --ms-bg-2:#ded0fd; --ms-bg-3:#cebbfb;
  --ms-ink:#1a1428; --ms-ink-2:#322a4a; --ms-ink-3:#4a3d6b; --ms-ink-4:#8478a3;
  --ms-hair:rgba(88,51,176,0.08); --ms-hair-2:rgba(88,51,176,0.16); --ms-hair-3:rgba(88,51,176,0.28);
  --ms-mint:#6b46c1; --ms-mint-2:#6a47b8;
  --ms-mint-soft:rgba(107,70,193,0.08); --ms-mint-rim:rgba(107,70,193,0.22);
  --ms-glass-bg:rgba(255,255,255,0.72); --ms-glass-bg-2:rgba(235,227,254,0.85);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 0.5px rgba(88,51,176,0.10);
}

/* ── 20 · MATERIAL YOU — expressive purple, Google M3 ────────────────
   v188-isk5 · WCAG AA · --gold-lt darkened from #7f67be (4.35:1) to
   #6a52a8 (5.28:1). --gold unchanged (already 5.04). */
html[data-ui="material"]{
  --bg:#fef7ff; --bg-1:#f7f2fa; --bg-2:#ece6f0; --bg-3:#e0d9e4;
  --cream:#1d1b20; --cream-dim:#49454f; --cream-faint:#79747e;
  --gold:#6750a4; --gold-lt:#6a52a8;
  --gold-bg:rgba(103,80,164,0.10); --gold-bdr:rgba(103,80,164,0.30);
  --border:rgba(73,52,97,0.10); --border-mid:rgba(73,52,97,0.18);
  --ms-bg:#fef7ff; --ms-bg-1:#f7f2fa; --ms-bg-2:#ece6f0; --ms-bg-3:#e0d9e4;
  --ms-ink:#1d1b20; --ms-ink-2:#33303a; --ms-ink-3:#49454f; --ms-ink-4:#79747e;
  --ms-hair:rgba(73,52,97,0.08); --ms-hair-2:rgba(73,52,97,0.16); --ms-hair-3:rgba(73,52,97,0.28);
  --ms-mint:#6750a4; --ms-mint-2:#6a52a8;
  --ms-mint-soft:rgba(103,80,164,0.10); --ms-mint-rim:rgba(103,80,164,0.30);
  --ms-glass-bg:rgba(254,247,255,0.85); --ms-glass-bg-2:rgba(247,242,250,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(73,52,97,0.10);
}

/* ── 21 · IA WRITER — warm parchment, near-black serif ──────────────── */
html[data-ui="ia"]{
  --bg:#f5f1ea; --bg-1:#fbf8f2; --bg-2:#efe9de; --bg-3:#e2dccf;
  --cream:#18161f; --cream-dim:#4a4640; --cream-faint:#8a8378;
  --gold:#2b2a26; --gold-lt:#4a4640;
  --gold-bg:rgba(43,42,38,0.06); --gold-bdr:rgba(43,42,38,0.22);
  --border:rgba(40,30,20,0.08); --border-mid:rgba(40,30,20,0.16);
  --ms-bg:#f5f1ea; --ms-bg-1:#fbf8f2; --ms-bg-2:#efe9de; --ms-bg-3:#e2dccf;
  --ms-ink:#18161f; --ms-ink-2:#33302f; --ms-ink-3:#4a4640; --ms-ink-4:#8a8378;
  --ms-hair:rgba(40,30,20,0.08); --ms-hair-2:rgba(40,30,20,0.16); --ms-hair-3:rgba(40,30,20,0.28);
  --ms-mint:#2b2a26; --ms-mint-2:#4a4640;
  --ms-mint-soft:rgba(43,42,38,0.06); --ms-mint-rim:rgba(43,42,38,0.22);
  --ms-glass-bg:rgba(251,248,242,0.85); --ms-glass-bg-2:rgba(245,241,234,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 0.5px rgba(40,30,20,0.08);
}

/* ── 22 · NOTION DARK — companion dark to notion, amber accent ──────── */
html[data-ui="notion-dark"]{
  --bg:#191919; --bg-1:#202020; --bg-2:#2a2a2a; --bg-3:#363636;
  --cream:#e6e6e6; --cream-dim:#a6a6a6; --cream-faint:#6e6e6e;
  --gold:#e4be7a; --gold-lt:#f5d48a;
  --gold-bg:rgba(228,190,122,0.10); --gold-bdr:rgba(228,190,122,0.28);
  --border:rgba(255,255,255,0.07); --border-mid:rgba(255,255,255,0.13);
  --ms-bg:#191919; --ms-bg-1:#202020; --ms-bg-2:#2a2a2a; --ms-bg-3:#363636;
  --ms-ink:#e6e6e6; --ms-ink-2:#c6c6c6; --ms-ink-3:#a6a6a6; --ms-ink-4:#6e6e6e;
  --ms-hair:rgba(255,255,255,0.06); --ms-hair-2:rgba(255,255,255,0.12); --ms-hair-3:rgba(255,255,255,0.22);
  --ms-mint:#e4be7a; --ms-mint-2:#f5d48a;
  --ms-mint-soft:rgba(228,190,122,0.10); --ms-mint-rim:rgba(228,190,122,0.28);
  --ms-glass-bg:rgba(25,25,25,0.78); --ms-glass-bg-2:rgba(32,32,32,0.88);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 0.5px rgba(255,255,255,0.05);
}

/* ── 23 · COSMIC (JWST) — deep space, burnt orange, cyan gas ─────────
   v188-isk5 · WCAG AA · dark theme — text needed LIGHTENING.
   --cream-faint lifted from #4a5878 (2.74:1) to #7088a8 (3.45:1) so
   tertiary text on the deep-space backdrop is readable. --cream-dim
   slightly bumped (#708090 4.36:1 on lifted → #8094a4 5.65:1). */
html[data-ui="cosmic"]{
  --bg:#000b29; --bg-1:#0a1440; --bg-2:#162154; --bg-3:#243066;
  --cream:#b0c4de; --cream-dim:#8094a4; --cream-faint:#7088a8;
  --gold:#ffbf00; --gold-lt:#00e5ee;
  --gold-bg:rgba(255,191,0,0.10); --gold-bdr:rgba(255,191,0,0.32);
  --border:rgba(176,196,222,0.10); --border-mid:rgba(176,196,222,0.22);
  --ms-bg:#000b29; --ms-bg-1:#0a1440; --ms-bg-2:#162154; --ms-bg-3:#243066;
  --ms-ink:#b0c4de; --ms-ink-2:#9bb3c8; --ms-ink-3:#8094a4; --ms-ink-4:#7088a8;
  --ms-hair:rgba(176,196,222,0.08); --ms-hair-2:rgba(176,196,222,0.18); --ms-hair-3:rgba(176,196,222,0.30);
  --ms-mint:#ffbf00; --ms-mint-2:#ffd140;
  --ms-mint-soft:rgba(255,191,0,0.10); --ms-mint-rim:rgba(255,191,0,0.32);
  --ms-glass-bg:rgba(10,20,64,0.72); --ms-glass-bg-2:rgba(22,33,84,0.85);
  --ms-glass-rim:inset 0 1px 0 rgba(176,196,222,0.10), inset 0 0 0 0.5px rgba(176,196,222,0.08);
}

/* ── 24 · KISWAH — Kaaba black, gold filigree ───────────────────────── */
html[data-ui="kiswah"]{
  --bg:#0a0906; --bg-1:#14110a; --bg-2:#1e1910; --bg-3:#2a2216;
  --cream:#f0e4c8; --cream-dim:#c4b58e; --cream-faint:#7a6c4f;
  --gold:#c8a951; --gold-lt:#e8c96f;
  --gold-bg:rgba(200,169,81,0.08); --gold-bdr:rgba(200,169,81,0.35);
  --border:rgba(200,169,81,0.10); --border-mid:rgba(200,169,81,0.22);
  --ms-bg:#0a0906; --ms-bg-1:#14110a; --ms-bg-2:#1e1910; --ms-bg-3:#2a2216;
  --ms-ink:#f0e4c8; --ms-ink-2:#d6c5a8; --ms-ink-3:#c4b58e; --ms-ink-4:#7a6c4f;
  --ms-hair:rgba(200,169,81,0.10); --ms-hair-2:rgba(200,169,81,0.20); --ms-hair-3:rgba(200,169,81,0.32);
  --ms-mint:#c8a951; --ms-mint-2:#e8c96f;
  --ms-mint-soft:rgba(200,169,81,0.08); --ms-mint-rim:rgba(200,169,81,0.35);
  --ms-glass-bg:rgba(10,9,6,0.82); --ms-glass-bg-2:rgba(20,17,10,0.90);
  --ms-glass-rim:inset 0 1px 0 rgba(200,169,81,0.14), inset 0 0 0 0.5px rgba(200,169,81,0.08);
}

/* ── 25 · MADINAH — green dome, soft whites ─────────────────────────── */
html[data-ui="madinah"]{
  --bg:#f5f0e6; --bg-1:#ffffff; --bg-2:#ebe7db; --bg-3:#ddd6c4;
  --cream:#1a2620; --cream-dim:#4a5a50; --cream-faint:#7e8a82;
  --gold:#1e5a3c; --gold-lt:#2a7a50;
  --gold-bg:rgba(30,90,60,0.08); --gold-bdr:rgba(30,90,60,0.30);
  --border:rgba(30,90,60,0.10); --border-mid:rgba(30,90,60,0.20);
  --ms-bg:#f5f0e6; --ms-bg-1:#ebe7db; --ms-bg-2:#ddd6c4; --ms-bg-3:#cfc6ad;
  --ms-ink:#1a2620; --ms-ink-2:#324138; --ms-ink-3:#4a5a50; --ms-ink-4:#7e8a82;
  --ms-hair:rgba(30,90,60,0.08); --ms-hair-2:rgba(30,90,60,0.18); --ms-hair-3:rgba(30,90,60,0.30);
  --ms-mint:#1e5a3c; --ms-mint-2:#2a7a50;
  --ms-mint-soft:rgba(30,90,60,0.08); --ms-mint-rim:rgba(30,90,60,0.30);
  --ms-glass-bg:rgba(255,255,255,0.85); --ms-glass-bg-2:rgba(235,231,219,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 0.5px rgba(30,90,60,0.10);
}

/* ── 26 · OTTOMAN — aged parchment, wine + Ottoman blue ─────────────── */
html[data-ui="ottoman"]{
  --bg:#f0e6d0; --bg-1:#f8efd8; --bg-2:#e8ddc2; --bg-3:#ddd0b0;
  --cream:#2a1f10; --cream-dim:#5a4530; --cream-faint:#8b7858;
  --gold:#8b2e3c; --gold-lt:#a8384a;
  --gold-bg:rgba(139,46,60,0.08); --gold-bdr:rgba(139,46,60,0.30);
  --border:rgba(80,40,20,0.15); --border-mid:rgba(80,40,20,0.28);
  --ms-bg:#f0e6d0; --ms-bg-1:#e8ddc2; --ms-bg-2:#ddd0b0; --ms-bg-3:#cdbf98;
  --ms-ink:#2a1f10; --ms-ink-2:#423220; --ms-ink-3:#5a4530; --ms-ink-4:#8b7858;
  --ms-hair:rgba(80,40,20,0.12); --ms-hair-2:rgba(80,40,20,0.22); --ms-hair-3:rgba(80,40,20,0.38);
  --ms-mint:#8b2e3c; --ms-mint-2:#a8384a;
  --ms-mint-soft:rgba(139,46,60,0.08); --ms-mint-rim:rgba(139,46,60,0.30);
  --ms-glass-bg:rgba(248,239,216,0.85); --ms-glass-bg-2:rgba(232,221,194,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.78), inset 0 0 0 0.5px rgba(80,40,20,0.12);
}

/* ── 27 · ALHAMBRA — Moorish, terracotta + turquoise ─────────────────
   v188-isk5 · WCAG AA · --gold deepened from #c4552c (4.09:1) to
   #a8451f (4.96:1). --gold-lt from #e06a3f (3.04:1) to #b04825
   (4.51:1). Same terracotta family, deeper saturation. */
html[data-ui="alhambra"]{
  --bg:#faf4e8; --bg-1:#fff9ec; --bg-2:#f0e6d2; --bg-3:#e2d4b8;
  --cream:#2a1f14; --cream-dim:#5a4a38; --cream-faint:#8a7a60;
  --gold:#a8451f; --gold-lt:#b04825;
  --gold-bg:rgba(168,69,31,0.08); --gold-bdr:rgba(168,69,31,0.30);
  --border:rgba(50,100,110,0.12); --border-mid:rgba(50,100,110,0.25);
  --ms-bg:#faf4e8; --ms-bg-1:#fff9ec; --ms-bg-2:#f0e6d2; --ms-bg-3:#e2d4b8;
  --ms-ink:#2a1f14; --ms-ink-2:#403428; --ms-ink-3:#5a4a38; --ms-ink-4:#8a7a60;
  --ms-hair:rgba(50,100,110,0.10); --ms-hair-2:rgba(50,100,110,0.22); --ms-hair-3:rgba(50,100,110,0.36);
  --ms-mint:#a8451f; --ms-mint-2:#b04825;
  --ms-mint-soft:rgba(168,69,31,0.08); --ms-mint-rim:rgba(168,69,31,0.30);
  --ms-glass-bg:rgba(255,249,236,0.85); --ms-glass-bg-2:rgba(240,230,210,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 0.5px rgba(50,100,110,0.12);
}

/* ── 28 · ZAMZAM — pure whites, water-cool silver ────────────────────
   v188-isk5 · WCAG AA · --cream-faint lifted from #8a9bac (2.67:1) to
   #6b7c8c (3.46:1). --gold darkened from #4a8ba8 (3.55:1) to #2d5870
   (5.74:1). --gold-lt darkened from #5fa5c4 (2.57:1) to #346b80
   (4.59:1). Same water-blue family, just deeper. */
html[data-ui="zamzam"]{
  --bg:#f5f8fa; --bg-1:#ffffff; --bg-2:#ecf1f5; --bg-3:#dde5ed;
  --cream:#1a2838; --cream-dim:#4a5a70; --cream-faint:#6b7c8c;
  --gold:#2d5870; --gold-lt:#346b80;
  --gold-bg:rgba(45,88,112,0.08); --gold-bdr:rgba(45,88,112,0.30);
  --border:rgba(60,90,120,0.08); --border-mid:rgba(60,90,120,0.16);
  --ms-bg:#f5f8fa; --ms-bg-1:#ecf1f5; --ms-bg-2:#dde5ed; --ms-bg-3:#cdd8e3;
  --ms-ink:#1a2838; --ms-ink-2:#324254; --ms-ink-3:#4a5a70; --ms-ink-4:#6b7c8c;
  --ms-hair:rgba(60,90,120,0.06); --ms-hair-2:rgba(60,90,120,0.14); --ms-hair-3:rgba(60,90,120,0.25);
  --ms-mint:#2d5870; --ms-mint-2:#346b80;
  --ms-mint-soft:rgba(45,88,112,0.08); --ms-mint-rim:rgba(45,88,112,0.30);
  --ms-glass-bg:rgba(255,255,255,0.85); --ms-glass-bg-2:rgba(236,241,245,0.92);
  --ms-glass-rim:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 0.5px rgba(60,90,120,0.08);
}

/* ════════════════════════════════════════════════════════════════════════
   COSMIC CLIFFS family (6) · all share the JWST cliffs image backdrop.
   The image lives in :root as --bg-cosmic-cliffs (shared-themes.css).
   ──────────────────────────────────────────────────────────────────── */

/* Shared scaffolding · body image painted via ::before, scrim via ::after */
html[data-ui="cosmic-warm"] body,
html[data-ui="cosmic-cool"] body,
html[data-ui="cosmic-bal"]  body,
html[data-ui="ambient-soft"] body,
html[data-ui="ambient-lit"]  body,
html[data-ui="ambient-deep"] body{
  background:transparent !important;
  position:relative;
  min-height:100vh;
}
html[data-ui="cosmic-warm"] body::before,
html[data-ui="cosmic-cool"] body::before,
html[data-ui="cosmic-bal"]  body::before,
html[data-ui="ambient-soft"] body::before,
html[data-ui="ambient-lit"]  body::before,
html[data-ui="ambient-deep"] body::before{
  content:''; position:fixed; inset:0; z-index:-2;
  background-image:var(--bg-cosmic-cliffs);
  background-size:cover; background-position:center;
  background-repeat:no-repeat; background-attachment:fixed;
  pointer-events:none;
}
html[data-ui="cosmic-warm"] body::after,
html[data-ui="cosmic-cool"] body::after,
html[data-ui="cosmic-bal"]  body::after,
html[data-ui="ambient-soft"] body::after,
html[data-ui="ambient-lit"]  body::after,
html[data-ui="ambient-deep"] body::after{
  content:''; position:fixed; inset:0; z-index:-1;
  pointer-events:none;
}
/* Ambient family · image heavily blurred */
html[data-ui="ambient-soft"] body::before{ filter:blur(28px) saturate(1.15); transform:scale(1.18); }
html[data-ui="ambient-lit"]  body::before{ filter:blur(34px) saturate(1.40); transform:scale(1.22); }
html[data-ui="ambient-deep"] body::before{ filter:blur(30px) saturate(0.85) hue-rotate(8deg); transform:scale(1.18); }

/* ── 9 · COSMIC-WARM ──────────────────────────────────────────────── */
html[data-ui="cosmic-warm"]{
  --bg:#26181c;
  --bg-1:rgba(38,24,28,0.78); --bg-2:rgba(20,12,14,0.55); --bg-3:rgba(50,30,22,0.65);
  --cream:#f5e6c8; --cream-dim:#c8a888; --cream-faint:#8a7060;
  --gold:#f0a868; --gold-lt:#f5c088;
  --gold-bg:rgba(240,168,104,0.18); --gold-bdr:rgba(240,168,104,0.45);
  --border:rgba(240,168,104,0.18); --border-mid:rgba(240,168,104,0.32);
  --ms-bg:#26181c; --ms-bg-1:rgba(38,24,28,0.78); --ms-bg-2:rgba(20,12,14,0.55); --ms-bg-3:rgba(50,30,22,0.65);
  --ms-ink:#f5e6c8; --ms-ink-2:#dcc8a8; --ms-ink-3:#c8a888; --ms-ink-4:#8a7060;
  --ms-hair:rgba(240,168,104,0.18); --ms-hair-2:rgba(240,168,104,0.28); --ms-hair-3:rgba(240,168,104,0.40);
  --ms-mint:#f0a868; --ms-mint-2:#f5c088;
  --ms-mint-soft:rgba(240,168,104,0.18); --ms-mint-rim:rgba(240,168,104,0.45);
  --ms-glass-bg:rgba(38,24,18,0.72); --ms-glass-bg-2:rgba(50,30,20,0.82);
  --ms-glass-rim:inset 0 1px 0 rgba(240,168,104,0.16), inset 0 0 0 0.5px rgba(240,168,104,0.12);
}
html[data-ui="cosmic-warm"] body{ color:#f5e6c8; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; }
html[data-ui="cosmic-warm"] body::after{ background:linear-gradient(135deg, rgba(28,16,12,0.78), rgba(45,28,18,0.72) 50%, rgba(20,12,10,0.82)); }

/* ── 10 · COSMIC-COOL ─────────────────────────────────────────────── */
html[data-ui="cosmic-cool"]{
  --bg:#101c24;
  --bg-1:rgba(16,28,36,0.82); --bg-2:rgba(8,16,22,0.55); --bg-3:rgba(20,40,52,0.65);
  --cream:#dce8ec; --cream-dim:#8aa2aa; --cream-faint:#5a7078;
  --gold:#5fd8de; --gold-lt:#7ee8ee;
  --gold-bg:rgba(95,216,222,0.18); --gold-bdr:rgba(95,216,222,0.45);
  --border:rgba(95,216,222,0.18); --border-mid:rgba(95,216,222,0.32);
  --ms-bg:#101c24; --ms-bg-1:rgba(16,28,36,0.82); --ms-bg-2:rgba(8,16,22,0.55); --ms-bg-3:rgba(20,40,52,0.65);
  --ms-ink:#dce8ec; --ms-ink-2:#b0c4c8; --ms-ink-3:#8aa2aa; --ms-ink-4:#5a7078;
  --ms-hair:rgba(95,216,222,0.18); --ms-hair-2:rgba(95,216,222,0.28); --ms-hair-3:rgba(95,216,222,0.40);
  --ms-mint:#5fd8de; --ms-mint-2:#7ee8ee;
  --ms-mint-soft:rgba(95,216,222,0.18); --ms-mint-rim:rgba(95,216,222,0.45);
  --ms-glass-bg:rgba(16,28,36,0.78); --ms-glass-bg-2:rgba(20,40,52,0.85);
  --ms-glass-rim:inset 0 1px 0 rgba(95,216,222,0.16), inset 0 0 0 0.5px rgba(95,216,222,0.12);
}
html[data-ui="cosmic-cool"] body{ color:#dce8ec; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; }
html[data-ui="cosmic-cool"] body::after{ background:linear-gradient(135deg, rgba(10,18,28,0.82), rgba(14,28,38,0.78) 50%, rgba(8,14,22,0.85)); }

/* ── 11 · COSMIC-BAL ──────────────────────────────────────────────── */
html[data-ui="cosmic-bal"]{
  --bg:#1a1820;
  --bg-1:rgba(26,24,32,0.82); --bg-2:rgba(12,12,18,0.55); --bg-3:rgba(40,32,40,0.65);
  --cream:#ece4d2; --cream-dim:#a89d8a; --cream-faint:#706a62;
  --gold:#f0b078; --gold-lt:#f5c590;
  --gold-bg:rgba(240,176,120,0.18); --gold-bdr:rgba(240,176,120,0.42);
  --border:rgba(232,210,168,0.16); --border-mid:rgba(232,210,168,0.30);
  --ms-bg:#1a1820; --ms-bg-1:rgba(26,24,32,0.82); --ms-bg-2:rgba(12,12,18,0.55); --ms-bg-3:rgba(40,32,40,0.65);
  --ms-ink:#ece4d2; --ms-ink-2:#cfc5b0; --ms-ink-3:#a89d8a; --ms-ink-4:#706a62;
  --ms-hair:rgba(232,210,168,0.16); --ms-hair-2:rgba(232,210,168,0.26); --ms-hair-3:rgba(232,210,168,0.38);
  --ms-mint:#f0b078; --ms-mint-2:#f5c590;
  --ms-mint-soft:rgba(240,176,120,0.18); --ms-mint-rim:rgba(240,176,120,0.42);
  --ms-glass-bg:rgba(26,24,32,0.78); --ms-glass-bg-2:rgba(40,32,40,0.85);
  --ms-glass-rim:inset 0 1px 0 rgba(232,210,168,0.14), inset 0 0 0 0.5px rgba(232,210,168,0.10);
}
html[data-ui="cosmic-bal"] body{ color:#ece4d2; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; }
html[data-ui="cosmic-bal"] body::after{ background:linear-gradient(135deg, rgba(18,18,26,0.78), rgba(22,16,20,0.74) 50%, rgba(14,16,22,0.82)); }
/* Signature · gradient-gold Arabic */
html[data-ui="cosmic-bal"] .v-arabic,
html[data-ui="cosmic-bal"] .v-ar{
  background:linear-gradient(180deg,#f5dfba 0%,#e8c890 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── 12 · AMBIENT-SOFT ────────────────────────────────────────────── */
html[data-ui="ambient-soft"]{
  --bg:#14141c;
  --bg-1:rgba(20,20,28,0.55); --bg-2:rgba(8,8,14,0.45); --bg-3:rgba(28,28,40,0.60);
  --cream:#f5ecd8; --cream-dim:#c8b898; --cream-faint:#807060;
  --gold:#f0b878; --gold-lt:#f5cc98;
  --gold-bg:rgba(240,184,120,0.20); --gold-bdr:rgba(240,184,120,0.45);
  --border:rgba(240,184,120,0.22); --border-mid:rgba(240,184,120,0.36);
  --ms-bg:#14141c; --ms-bg-1:rgba(20,20,28,0.55); --ms-bg-2:rgba(8,8,14,0.45); --ms-bg-3:rgba(28,28,40,0.60);
  --ms-ink:#f5ecd8; --ms-ink-2:#dcc8a8; --ms-ink-3:#c8b898; --ms-ink-4:#807060;
  --ms-hair:rgba(240,184,120,0.22); --ms-hair-2:rgba(240,184,120,0.30); --ms-hair-3:rgba(240,184,120,0.42);
  --ms-mint:#f0b878; --ms-mint-2:#f5cc98;
  --ms-mint-soft:rgba(240,184,120,0.20); --ms-mint-rim:rgba(240,184,120,0.45);
  --ms-glass-bg:rgba(20,20,28,0.55); --ms-glass-bg-2:rgba(28,28,40,0.68);
  --ms-glass-rim:inset 0 1px 0 rgba(240,184,120,0.16), inset 0 0 0 0.5px rgba(240,184,120,0.12);
}
html[data-ui="ambient-soft"] body{ color:#f5ecd8; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; }
html[data-ui="ambient-soft"] body::after{ background:linear-gradient(135deg, rgba(15,15,25,0.55), rgba(25,18,15,0.50) 50%, rgba(10,10,18,0.58)); }

/* ── 13 · AMBIENT-LIT ─────────────────────────────────────────────── */
html[data-ui="ambient-lit"]{
  --bg:#1c1018;
  --bg-1:rgba(28,16,24,0.50); --bg-2:rgba(14,8,16,0.42); --bg-3:rgba(40,20,30,0.58);
  --cream:#ffe8e8; --cream-dim:#d8b8b8; --cream-faint:#9a8080;
  --gold:#ff8a8a; --gold-lt:#ffb0b0;
  --gold-bg:rgba(255,140,140,0.20); --gold-bdr:rgba(255,140,140,0.50);
  --border:rgba(255,140,140,0.22); --border-mid:rgba(255,140,140,0.40);
  --ms-bg:#1c1018; --ms-bg-1:rgba(28,16,24,0.50); --ms-bg-2:rgba(14,8,16,0.42); --ms-bg-3:rgba(40,20,30,0.58);
  --ms-ink:#ffe8e8; --ms-ink-2:#e8c8c8; --ms-ink-3:#d8b8b8; --ms-ink-4:#9a8080;
  --ms-hair:rgba(255,140,140,0.22); --ms-hair-2:rgba(255,140,140,0.32); --ms-hair-3:rgba(255,140,140,0.45);
  --ms-mint:#ff8a8a; --ms-mint-2:#ffb0b0;
  --ms-mint-soft:rgba(255,140,140,0.20); --ms-mint-rim:rgba(255,140,140,0.50);
  --ms-glass-bg:rgba(28,16,24,0.55); --ms-glass-bg-2:rgba(40,20,30,0.68);
  --ms-glass-rim:inset 0 1px 0 rgba(255,140,140,0.16), inset 0 0 0 0.5px rgba(255,140,140,0.12);
}
html[data-ui="ambient-lit"] body{ color:#ffe8e8; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; }
html[data-ui="ambient-lit"] body::after{ background:linear-gradient(135deg, rgba(20,8,16,0.55), rgba(35,12,20,0.50) 50%, rgba(15,8,16,0.58)); }

/* ── 14 · AMBIENT-DEEP ────────────────────────────────────────────── */
html[data-ui="ambient-deep"]{
  --bg:#0c1420;
  --bg-1:rgba(18,28,42,0.55); --bg-2:rgba(8,12,20,0.42); --bg-3:rgba(28,40,58,0.60);
  --cream:#e0eef8; --cream-dim:#a8c0d0; --cream-faint:#607888;
  --gold:#78c8f0; --gold-lt:#9ad8f8;
  --gold-bg:rgba(120,200,240,0.18); --gold-bdr:rgba(120,200,240,0.45);
  --border:rgba(120,200,240,0.22); --border-mid:rgba(120,200,240,0.38);
  --ms-bg:#0c1420; --ms-bg-1:rgba(18,28,42,0.55); --ms-bg-2:rgba(8,12,20,0.42); --ms-bg-3:rgba(28,40,58,0.60);
  --ms-ink:#e0eef8; --ms-ink-2:#bcd0e0; --ms-ink-3:#a8c0d0; --ms-ink-4:#607888;
  --ms-hair:rgba(120,200,240,0.22); --ms-hair-2:rgba(120,200,240,0.32); --ms-hair-3:rgba(120,200,240,0.45);
  --ms-mint:#78c8f0; --ms-mint-2:#9ad8f8;
  --ms-mint-soft:rgba(120,200,240,0.18); --ms-mint-rim:rgba(120,200,240,0.45);
  --ms-glass-bg:rgba(18,28,42,0.55); --ms-glass-bg-2:rgba(28,40,58,0.68);
  --ms-glass-rim:inset 0 1px 0 rgba(120,200,240,0.16), inset 0 0 0 0.5px rgba(120,200,240,0.12);
}
html[data-ui="ambient-deep"] body{ color:#e0eef8; font-family:-apple-system,BlinkMacSystemFont,'Inter',sans-serif; }
html[data-ui="ambient-deep"] body::after{ background:linear-gradient(135deg, rgba(8,14,22,0.62), rgba(12,22,34,0.55) 50%, rgba(8,12,20,0.66)); }