/* al-Asl Mutūn — Dark mode. All dark styling lives here so it can be added or removed in one place. Light mode is unchanged; the brand palette (madder + gilt on paper) is preserved, only recast onto a deep warm ink for comfortable night reading. How it works: theme.js sets (resolving "auto" against the device). Rules below key off data-theme="dark" and win by specificity (:root[data-theme="dark"] …). Two new surface variables (--surface, --surface-2) back the raised cards/buttons that were hard-coded white; they default to their light values so nothing changes in light mode. */ :root { --surface:#fff; --surface-2:#f7f2e5; /* panel (hero / chapter head / footer) gradient + dark-ink text on it. Defaults are the house madder/rose; per-matn palettes below reassign them. */ --pnl-1:#d8b8b2; --pnl-2:#ceaba6; --pnl-3:#c2a09b; --pnl-txt:#5e2c30; } /* ============================================================ Per-matn accent palettes (light). Only the rubrication accent + panel tint change; paper, gold, type, emblem and layout stay constant. Set on (and on home cards via .matn-card.m-…). matn-madder = the default. ============================================================ */ body.matn-lapis, .matn-card.m-lapis, .matn-row.m-lapis, .cont-card.m-lapis, .bm-row.m-lapis { --madder:#3c5a86; --madder-soft:#5a76a0; --lapis:#233a5e; --lapis-2:#2e4a72; --lapis-3:#3c5a86; --rose:#a9b6cc; --rose-2:#9db0c8; --rose-hi:#bcc6d8; --pnl-1:#bcc6d8; --pnl-2:#a9b6cc; --pnl-3:#9db0c8; --pnl-txt:#233a5e; --panel-soft:#33517d; --sage:#8496ab; --emblem-filter:saturate(1.7) hue-rotate(205deg); /* madder star → lapis */ } body.matn-verdigris, .matn-card.m-verdigris, .matn-row.m-verdigris, .cont-card.m-verdigris, .bm-row.m-verdigris { --madder:#3f7458; --madder-soft:#5a917a; --lapis:#274d3a; --lapis-2:#335f47; --lapis-3:#3f7458; --rose:#adc0a9; --rose-2:#a1b79d; --rose-hi:#bdccb9; --pnl-1:#bdccb9; --pnl-2:#adc0a9; --pnl-3:#a1b79d; --pnl-txt:#274d3a; --panel-soft:#335f47; --sage:#7f9a86; --emblem-filter:saturate(1.5) hue-rotate(122deg); /* madder star → verdigris */ } body.matn-plum, .matn-card.m-plum, .matn-row.m-plum, .cont-card.m-plum, .bm-row.m-plum { --madder:#6d4f8c; --madder-soft:#8a6fa6; --lapis:#41305e; --lapis-2:#523e71; --lapis-3:#6d4f8c; --rose:#c0b2cf; --rose-2:#b5a5c7; --rose-hi:#cdc1d9; --pnl-1:#cdc1d9; --pnl-2:#c0b2cf; --pnl-3:#b5a5c7; --pnl-txt:#41305e; --panel-soft:#523e71; --sage:#94879f; --emblem-filter:saturate(1.2) hue-rotate(285deg); /* madder star → plum */ } /* Tint the al-Asl star medallions to the matn accent. The emblem is a raster PNG, so we hue-rotate it — and filter only the emblem (via ::before) so the verse/chapter number sitting on top keeps its own colour. */ body.matn-lapis .toc-num, body.matn-lapis .medallion, body.matn-verdigris .toc-num, body.matn-verdigris .medallion, body.matn-plum .toc-num, body.matn-plum .medallion { background-image:none !important; } body.matn-lapis .toc-num::before, body.matn-lapis .medallion::before, body.matn-verdigris .toc-num::before, body.matn-verdigris .medallion::before, body.matn-plum .toc-num::before, body.matn-plum .medallion::before { content:""; position:absolute; inset:0; z-index:0; background:var(--emblem) center/contain no-repeat; filter:var(--emblem-filter); } body.matn-lapis .ch-medallion, body.matn-verdigris .ch-medallion, body.matn-plum .ch-medallion { filter:var(--emblem-filter) drop-shadow(0 3px 7px rgba(0,0,0,.28)); } :root[data-theme="dark"] { /* page + panels */ --paper:#17110f; --paper-2:#211712; --paper-edge:#3a2c26; --surface:#241b16; --surface-2:#2c221c; /* text */ --ink:#ece1d2; --ink-soft:#bcab9d; --sage:#a89187; --cream:#f3e6da; --cream-dim:#cdb8ad; --panel-soft:#c9b3a8; /* brand — hue kept, lifted for contrast on ink */ --madder:#d3797c; --madder-soft:#c06d70; --gilt:#d4ab4f; --gilt-hi:#eccb72; --gilt-deep:#c49a3f; /* maroon family: dark plates (used as backgrounds) + a light heading tone */ --lapis:#6e3438; --lapis-2:#864447; --lapis-3:#d98a8d; --rose:#2b1819; --rose-2:#2b1819; --rose-hi:#331c1d; --blush:#7a4f4a; --blush-soft:#4a2f2c; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.55); /* dark panel gradient (per-matn tints below); default = deep madder */ --pnl-dk-1:#3a2122; --pnl-dk-2:#2b1819; --pnl-dk-3:#241415; } /* per-matn accent lifts + tinted dark panels */ :root[data-theme="dark"] body.matn-lapis, :root[data-theme="dark"] .matn-card.m-lapis, :root[data-theme="dark"] .matn-row.m-lapis, :root[data-theme="dark"] .cont-card.m-lapis, :root[data-theme="dark"] .bm-row.m-lapis { --madder:#7fa0cc; --madder-soft:#6f90bd; --lapis:#33517d; --lapis-2:#3f5f8c; --lapis-3:#8fabd2; --pnl-dk-1:#1f2a3c; --pnl-dk-2:#182231; --pnl-dk-3:#141b28; } :root[data-theme="dark"] body.matn-verdigris, :root[data-theme="dark"] .matn-card.m-verdigris, :root[data-theme="dark"] .matn-row.m-verdigris, :root[data-theme="dark"] .cont-card.m-verdigris, :root[data-theme="dark"] .bm-row.m-verdigris { --madder:#79c091; --madder-soft:#6bb283; --lapis:#2f5a43; --lapis-2:#3a6b50; --lapis-3:#84c79c; --pnl-dk-1:#1e2c23; --pnl-dk-2:#17231b; --pnl-dk-3:#131c16; } :root[data-theme="dark"] body.matn-plum, :root[data-theme="dark"] .matn-card.m-plum, :root[data-theme="dark"] .matn-row.m-plum, :root[data-theme="dark"] .cont-card.m-plum, :root[data-theme="dark"] .bm-row.m-plum { --madder:#af92d3; --madder-soft:#9f82c4; --lapis:#4d3a6e; --lapis-2:#5c4880; --lapis-3:#bda1e0; --pnl-dk-1:#291f3a; --pnl-dk-2:#20182d; --pnl-dk-3:#191323; } /* ---- large "soft-rose" panels: recast dark, with light text ---- */ :root[data-theme="dark"] header.hero, :root[data-theme="dark"] .ch-head, :root[data-theme="dark"] .mc-top, :root[data-theme="dark"] footer { background:radial-gradient(1100px 460px at 50% -22%, rgba(255,240,232,.06), transparent 62%), linear-gradient(155deg,var(--pnl-dk-1) 0%, var(--pnl-dk-2) 60%, var(--pnl-dk-3) 100%); background-color:var(--pnl-dk-2); color:var(--cream); } :root[data-theme="dark"] .hero .eyebrow, :root[data-theme="dark"] .ch-eyebrow { color:var(--gilt-hi) !important; } :root[data-theme="dark"] .hero h1.ar, :root[data-theme="dark"] .ch-ar, :root[data-theme="dark"] .mc-ar { color:#f3e3d7 !important; text-shadow:0 1px 14px rgba(0,0,0,.45) !important; } :root[data-theme="dark"] .hero .romantitle, :root[data-theme="dark"] .ch-en, :root[data-theme="dark"] .mc-tr { color:var(--gilt-hi) !important; } :root[data-theme="dark"] .hero .subtitle, :root[data-theme="dark"] .ch-desc, :root[data-theme="dark"] .ch-tr { color:var(--cream-dim) !important; } :root[data-theme="dark"] .chip { color:#f3e3d7 !important; border-color:rgba(230,198,111,.28) !important; background:rgba(255,255,255,.05) !important; } :root[data-theme="dark"] .chip b { color:var(--gilt-hi) !important; } :root[data-theme="dark"] .foot-tag { color:var(--cream) !important; } :root[data-theme="dark"] .foot-links a, :root[data-theme="dark"] .foot-copy a { color:var(--gilt-hi) !important; } :root[data-theme="dark"] .foot-links a:hover, :root[data-theme="dark"] .foot-copy a:hover { color:#fff !important; } :root[data-theme="dark"] .hero-star, :root[data-theme="dark"] .hero-emblem { filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); } /* logo plate stays light so the dark-ink wordmark PNG remains legible */ /* ---- raised light surfaces → dark ---- */ :root[data-theme="dark"] .brandbar-wrap { background:linear-gradient(180deg,#241a15,var(--paper)); } :root[data-theme="dark"] a.toc-card, :root[data-theme="dark"] a.matn-card, :root[data-theme="dark"] .matn-row, :root[data-theme="dark"] .cont-card, :root[data-theme="dark"] .prep-card, :root[data-theme="dark"] .outline li, :root[data-theme="dark"] .ayah-card { background:linear-gradient(180deg,#241b16,#1c1410); } :root[data-theme="dark"] .toc-num span, :root[data-theme="dark"] .medallion .vn, :root[data-theme="dark"] .mc-emblem .ord { background:var(--surface-2); } :root[data-theme="dark"] .mc-emblem { background:var(--emblem) center/82% no-repeat, var(--paper-2); } /* home list rows + continue card */ :root[data-theme="dark"] .mr-emblem, :root[data-theme="dark"] .cont-card .cc-emblem { background:var(--paper-2); } :root[data-theme="dark"] .mr-emblem .ord { background:var(--surface-2); } :root[data-theme="dark"] .mr-ar { color:var(--lapis-3); } :root[data-theme="dark"] .mr-mz { background:var(--surface); } :root[data-theme="dark"] .mr-read { color:#1c1410; } :root[data-theme="dark"] .mr-prog .bar { background:var(--surface-2); } :root[data-theme="dark"] .bm-card { background:linear-gradient(180deg,#241b16,#1c1410); } /* illuminated home plates: deep per-matn tinted panels in dark */ :root[data-theme="dark"] .mr-plate, :root[data-theme="dark"] .cont-card { background:radial-gradient(320px 160px at 50% -30%, rgba(255,240,232,.06), transparent 62%), linear-gradient(155deg,var(--pnl-dk-1) 0%, var(--pnl-dk-2) 60%, var(--pnl-dk-3) 100%); } :root[data-theme="dark"] .mr-plate::after, :root[data-theme="dark"] .cont-card::after { border-color:rgba(230,198,111,.22); } :root[data-theme="dark"] .mr-ar { color:#f3e3d7; text-shadow:0 1px 10px rgba(0,0,0,.4); } :root[data-theme="dark"] .cont-card .cc-lbl { color:var(--gilt-hi); opacity:1; } :root[data-theme="dark"] .cont-card .cc-main { color:#f3e3d7; } :root[data-theme="dark"] .cont-card .cc-go { color:#1c1410; } :root[data-theme="dark"] .app-banner .ab-ar { color:var(--lapis-3); } :root[data-theme="dark"] .app-banner .ab-en { color:var(--gilt-hi); } :root[data-theme="dark"] .bm-row { border-top-color:var(--paper-edge); } :root[data-theme="dark"] .stats-card { background:linear-gradient(180deg,#241a15,var(--paper)); } :root[data-theme="dark"] .st::before { background:var(--paper-edge); } :root[data-theme="dark"] .st:nth-child(n+3) { border-top-color:var(--paper-edge); } :root[data-theme="dark"] .st .ic { background:var(--paper-2); color:#d9b45c; } :root[data-theme="dark"] .st .dots i { background:var(--paper-edge); } :root[data-theme="dark"] .st .dots i.on { background:#c49a3f; } :root[data-theme="dark"] .bm-row .bm-dot { box-shadow:0 0 0 3px #1c1410; } :root[data-theme="dark"] .bm-more { border-top-color:var(--paper-edge); } /* app "More" sheet */ :root[data-theme="dark"] .appsheet .as-panel { background:var(--paper-2); } :root[data-theme="dark"] .appsheet .as-grip { background:#4a3a30; } :root[data-theme="dark"] .appsheet .as-row { border-top-color:var(--paper-edge); } :root[data-theme="dark"] .appsheet .as-div { background:var(--paper-edge); } :root[data-theme="dark"] .appsheet .as-num, :root[data-theme="dark"] .appsheet .as-acts button, :root[data-theme="dark"] .appsheet .as-theme button { background:var(--surface); } :root[data-theme="dark"] .appsheet .as-theme button.on { background:var(--madder); color:#1c1410; } :root[data-theme="dark"] .mc-tag { background:var(--surface-2); } :root[data-theme="dark"] .note { background:linear-gradient(180deg,#2a1d18,#241813); } :root[data-theme="dark"] .status.soon { background:#3a201f; border-color:#5a2f2e; } :root[data-theme="dark"] .status.ready { color:#8fce9c; background:#1f2c22; border-color:#33513c; } /* nav + popovers */ :root[data-theme="dark"] .navbar { background:rgba(23,17,15,.88); } :root[data-theme="dark"] .menu-pop, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .copy-btn, :root[data-theme="dark"] .exp-toggle, :root[data-theme="dark"] .navprint, :root[data-theme="dark"] .guide-link a { background:var(--surface); } :root[data-theme="dark"] .nav-brand { color:var(--madder); } :root[data-theme="dark"] .btn-ghost { color:var(--gilt-hi); border-color:rgba(211,121,124,.5); } :root[data-theme="dark"] .btn-ghost:hover { background:rgba(211,121,124,.12); } /* explanation / word-gloss surfaces already ride --paper-2 & --lapis vars */ /* ---- JS-injected panels (memorize, notes, help menu, bookmarks) ---- */ /* These already use var(--x, fallback) for text/border; only their card backgrounds were literal white, now variable-backed. A few semantic accent colours are lifted for contrast on ink. */ /* mastery = gilt gold (lifted for dark); learning stays amber; due stays red */ :root[data-theme="dark"] .mzrate .got { color:#e6c66f; border-color:#5a4a1f; } :root[data-theme="dark"] .mzrate .got.on { background:#c49a3f; border-color:#c49a3f; color:#241b10; } :root[data-theme="dark"] .verse.mzp-learning .medallion .vn { background:var(--surface-2); color:#d9b45c; box-shadow:0 0 0 1.5px #a8862f; } :root[data-theme="dark"] .verse.mzp-mastered .medallion .vn { background:var(--surface-2); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--madder) 80%,#fff); } :root[data-theme="dark"] .verse.mzp-due .medallion .vn { background:color-mix(in srgb,var(--madder) 24%,var(--surface-2)); color:color-mix(in srgb,var(--madder) 82%,#fff); box-shadow:0 0 0 1.5px var(--madder); } :root[data-theme="dark"] .mzcta.calm { background:#2c2413; color:#e6c66f; } :root[data-theme="dark"] .mzactions button.danger, :root[data-theme="dark"] .mzbar .mz-rvstart { color:#e58a8a; border-color:#5a2f2e; } :root[data-theme="dark"] .bk-note, :root[data-theme="dark"] .mzend .big, :root[data-theme="dark"] .mzbig small { color:inherit; } :root[data-theme="dark"] .mzbarline { background:var(--paper-edge); } /* Shāṭibiyyah rumūz stay maroon (classical rubrication) — lift for dark */ :root[data-theme="dark"] .rmz { color:#d98a8d; } :root[data-theme="dark"] .hemi .ann::after { color:#d98a8d; } /* per-verse note box */ :root[data-theme="dark"] .verse-note { background:var(--surface-2); } /* walkthrough: dark stage + demo chips (revealed / hidden word) */ :root[data-theme="dark"] .tour-stage { background:linear-gradient(180deg,var(--surface),var(--paper-2)); border-bottom-color:var(--paper-edge); } :root[data-theme="dark"] .scene.revealed .m-word { background:var(--surface-2); } :root[data-theme="dark"] .scene.revealed .h-w, :root[data-theme="dark"] .scene .l-w { background:var(--paper-2); } /* app-shell top bar + bottom nav */ :root[data-theme="dark"] .apptop { background:radial-gradient(560px 130px at 50% -40%, rgba(255,240,232,.05), transparent 62%), linear-gradient(160deg,#33201c,#241b16 55%,#1c1410); box-shadow:0 4px 16px rgba(0,0,0,.5); } :root[data-theme="dark"] .apptop .t { color:var(--gilt-hi); } :root[data-theme="dark"] .apptop::after { background:linear-gradient(90deg,transparent,rgba(212,171,79,.45),transparent); } :root[data-theme="dark"] .appnav { background:rgba(23,17,15,.98); border-top-color:var(--paper-edge); } /* Jazariyyah — red words from the Suwayd print edition; lighter in dark mode */ :root[data-theme="dark"] .hemi .seg.rd, :root[data-theme="dark"] .hemi .rd { color:#e5836f; }