/* ═══════════════════════════════════════════════════════════════════════════ styles/tokens.css — Mithlayn · canonical design tokens (v208) ───────────────────────────────────────────────────────────────────────── The single source of truth for all colors, surfaces, type, motion, and shadow recipes used by the Mithlayn site. Synced to the v165 Memorize tool's palette so the host site and the embedded iframe render identically. LOAD ORDER (in , AFTER shared-themes.css and BEFORE manuscript.css) ← canonical Manuscript.css and topbar.css both consume these via var(--ms-*) and var(--tb-*); topbar tokens (--tb-*) are derived from --ms-* inside topbar.css's `header.hdr { ... }` scoped block. MODE ──── Mode is set on by an early inline script in every page's . The default :root block defines the dark palette; `:root:is([data-ui="mushaf"], [data-ui="medina"], [data-ui="qcom-light"], [data-ui="tarteel"], [data-ui="notion"])` overrides it for light mode. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Surfaces · charcoal stack synced to v165 ───────────────────── */ --ms-bg: #0E1418; /* page background */ --ms-bg-1: #1A2128; /* lifted surface (cards, sidebars) */ --ms-bg-2: #232C35; /* deeper surface */ --ms-bg-3: #2C3744; /* hover / active surface */ /* ── Sand ink · neutral cream descending (synced to v165) ─────── */ --ms-ink: #E8DDD0; --ms-ink-2: #B8AC9C; --ms-ink-3: #7A8D99; --ms-ink-4: #4A453B; /* ── Hairlines · warm-tinted rgba over the cream stack ────────── */ --ms-hair: rgba(232, 221, 208, 0.06); --ms-hair-2: rgba(232, 221, 208, 0.10); --ms-hair-3: rgba(232, 221, 208, 0.18); /* ── Mint · the Mithlayn family identity ──────────────────────── */ --ms-mint: #5FB594; --ms-mint-2: #7DC9A8; --ms-mint-soft: rgba(95, 181, 148, 0.10); --ms-mint-rim: rgba(95, 181, 148, 0.28); --ms-mint-glow: rgba(95, 181, 148, 0.45); /* ── Gold · Sakhāwī accent + sparkle ──────────────────────────── */ --ms-gold: #D4AF37; --ms-gold-soft: rgba(212, 175, 55, 0.10); --ms-gold-rim: rgba(212, 175, 55, 0.28); /* ── Lock aesthetic · inset depressions ───────────────────────── */ --ms-rim: inset 0 1px 0 rgba(255,255,255,0.04); --ms-rim-2: inset 0 1px 0 rgba(255,255,255,0.06); --ms-press: inset 0 1px 3px rgba(0,0,0,0.32), inset 0 -1px 0 rgba(255,255,255,0.04); --ms-press-mint:inset 0 1px 3px rgba(0,0,0,0.32), inset 0 -1px 0 rgba(95,181,148,0.20), 0 0 0 0.5px var(--ms-mint-rim); /* ── Glass / glow tokens (cards, headers, halos) ──────────────── */ --ms-glass-bg: rgba(26, 28, 32, 0.62); --ms-glass-bg-2:rgba(34, 37, 43, 0.58); --ms-glass-blur:blur(18px) saturate(135%); --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); /* ── Mint glow ring (selection / active) ──────────────────────── */ --ms-mint-glow-ring: 0 0 0 1px rgba(95, 181, 148, 0.28), 0 0 16px rgba(95, 181, 148, 0.16), 0 0 32px rgba(95, 181, 148, 0.04); --ms-gold-glow: 0 0 0 1px rgba(212, 175, 55, 0.28), 0 0 18px rgba(212, 175, 55, 0.18), 0 0 36px rgba(212, 175, 55, 0.06); /* ── Clay (warm earthen — selection / hub feature accent) ─────── */ --ms-clay: #C99A6A; --ms-clay-soft: rgba(201, 154, 106, 0.10); --ms-clay-rim: rgba(201, 154, 106, 0.32); --ms-clay-glow: 0 0 0 1px rgba(201, 154, 106, 0.22), 0 0 18px rgba(201, 154, 106, 0.16), 0 0 36px rgba(201, 154, 106, 0.06); /* ── Rose (destructive / "remove" accent — bookmark delete, etc.) Added v213-isk1-mushaf-d-chrome. Distinct from clay (warning / selection) so deletions read with their own tone. */ --ms-rose: #E07D7D; --ms-rose-soft: rgba(224, 125, 125, 0.10); --ms-rose-rim: rgba(224, 125, 125, 0.50); /* ── Paper (mushaf page background — kept theme-invariant on purpose so the printed-page aesthetic never shifts with the surrounding chrome theme). Owned here so mushaf.css and any future mushaf- adjacent surface (compile-mushaf.html banner preview, etc.) reference one source of truth. Added v213-isk1-mushaf-d-chrome. */ --ms-paper: #f7f1de; --ms-paper-rim: rgba(201, 185, 133, 1); /* --rule from compile stage */ /* ── Radii ────────────────────────────────────────────────────── */ --ms-r-sm: 6px; --ms-r-md: 10px; --ms-r-lg: 14px; --ms-r-xl: 20px; --ms-r-2xl: 28px; --ms-r-pill: 999px; /* ── Type ─────────────────────────────────────────────────────── */ --ms-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --ms-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --ms-quran: 'Amiri Quran', 'Amiri', serif; --ms-display: 'Fraunces', Georgia, serif; /* ── Motion ───────────────────────────────────────────────────── */ --ms-ease: cubic-bezier(0.4, 0, 0.2, 1); --ms-quick: transform 0.15s var(--ms-ease), background 0.18s var(--ms-ease), color 0.18s var(--ms-ease), box-shadow 0.18s var(--ms-ease), opacity 0.18s var(--ms-ease); /* ════════════════════════════════════════════════════════════════════ v188-isk3 · Scholar identity tokens ────────────────────────────────────────────────────────────────── Each of the four scholar/source families has its own locked color. These are theme-independent BY DESIGN — Sakhāwī is always cyan, Kirmānī is always pink, Iskāfī is always emerald, al-Mudhish is always warm-white. The colors signal source-identity at a glance across every theme. Previously these values lived as ~80 hardcoded hex literals scattered across main.css L953-1001 (.srcwin chrome) and modules/scholars/render.js. Token-ising them here means a single edit changes every reference site-wide. ──────────────────────────────────────────────────────────────────── */ /* Sakhāwī — cyan */ --sch-sak: #4fc3ff; --sch-sak-2: rgba(40,140,200,0.25); --sch-sak-soft: rgba(79,195,255,0.10); --sch-sak-rim: rgba(79,195,255,0.30); --sch-sak-glow: rgba(79,195,255,0.55); /* Kirmānī — pink */ --sch-kir: #e478b0; --sch-kir-2: rgba(208,88,148,0.25); --sch-kir-soft: rgba(228,120,176,0.10); --sch-kir-rim: rgba(228,120,176,0.30); --sch-kir-glow: rgba(228,120,176,0.55); /* Iskāfī — emerald */ --sch-isk: #3ec98a; --sch-isk-2: rgba(42,156,102,0.25); --sch-isk-soft: rgba(62,201,138,0.10); --sch-isk-rim: rgba(62,201,138,0.32); --sch-isk-glow: rgba(62,201,138,0.55); /* al-Mudhish — warm-white */ --sch-mud: #faf6e8; --sch-mud-rim: var(--cream, #2A1810); --sch-mud-glow: rgba(255,251,240,0.65); /* ════════════════════════════════════════════════════════════════════ v188-isk3 · Legacy --gold alias chain ────────────────────────────────────────────────────────────────── The old --gold/--gold-lt/--gold-bg/--gold-bdr namespace and the newer --ms-mint/--ms-mint-2/--ms-mint-soft/--ms-mint-rim namespace were parallel — every theme block in styles/themes.css set BOTH to the same color, four pairs of duplicate declarations per theme. Aliasing here means editing --ms-mint in a future theme block automatically flips --gold as well. The 79 main.css call sites that read var(--gold), the 202 that read var(--gold-lt), etc. continue to resolve correctly because var() resolution is re-evaluated per element. Themes that need a DIFFERENT gold than mint can still override --gold inside their html[data-ui="X"]{} block to break the alias. ──────────────────────────────────────────────────────────────────── */ --gold: var(--ms-mint, #d4af37); --gold-lt: var(--ms-mint-2, #e6c658); --gold-bg: var(--ms-mint-soft, rgba(212,175,55,0.10)); --gold-bdr: var(--ms-mint-rim, rgba(212,175,55,0.28)); /* ════════════════════════════════════════════════════════════════════ v188-isk3 · Status colors (intentionally theme-independent) ────────────────────────────────────────────────────────────────── These signal LIFE-CYCLE state on memorized surahs / pairs and should stay constant across every theme so users build muscle memory ("green = mastered, orange = conflict, amber = warning"). Currently consumed as hardcoded hex literals in ~75 sites: --mast-light · main.css L60 (.sb-dot.mast), L3187, L4666, L4942, index.html 16 inline styles --conf-light · main.css L58 (.sb-dot.conf), L3025, L4227, index.html 12 inline styles --warn-amber · index.html 5 inline styles Cleanup pass (replace hex → var) deferred to a focused session so each site can be verified — some hex usages are actually inside linear-gradient() composites or backgrounds where the alpha needs a separate token. Defining the names here unblocks that work. */ --mast-light: #a8e0b8; --conf-light: #f09878; --warn-amber: #f0b030; } /* ═══════════════════════════════════════════════════════════════════ Light mode — v165-derived warm-cream surface ─────────────────────────────────────────────────────────────────── */ /* v187-isk9-tokens-fix · The legacy light-mode :root:is(...) override block was removed here. Its specificity (0,2,0) was silently beating themes.css's html[data-ui="X"] (0,1,1), so every light theme rendered with this block's warm-cream values instead of the per-theme parchment / paper / lavender surfaces defined in styles/themes.css. Per-theme --ms-* tokens are now owned exclusively by themes.css. */