/* ============================================================================
Qawlat — MODERN theme tokens (--qm-*)
Source: claude.ai/design handoff (May 2026)
----------------------------------------------------------------------------
Cool paper · white surfaces · teal-emerald accent · dark green gradient.
Two-font lock: Noto Naskh Arabic (UI) + KFGQPC HAFS (ayahs).
USAGE:
…
Tokens live at :root so they're visible everywhere (safe to load globally).
Structural rules and visible chrome live in qm-system.css and are gated
to the .theme-modern wrapper, so existing pages remain untouched.
============================================================================ */
/* ---- Fonts (already shipped in the project root) ----------------------- */
/* Pulled from /notonaskharabic-*.woff2 and /uthmanichafs_v22.ttf, declared
once in fonts.css; no need to redeclare here. The token block below
references the same font-family names. */
:root,
.theme-modern {
/* ---- Type families ---- */
--qm-font-ui: "Noto Naskh Arabic", "Traditional Arabic", serif;
--qm-font-quran: "KFGQPC HAFS Uthmanic Script Regular", "Noto Naskh Arabic", serif;
/* ---- Paper / surfaces (cool, modern) ---- */
--qm-page: #f4f6f4;
--qm-page-soft: #ededea;
--qm-surface: #ffffff;
--qm-surface-soft: #eef1ee;
--qm-surface-strong: #ffffff;
--qm-fill: #f4f6f4;
/* ---- Ink / text ramp ---- */
--qm-ink: #173a2f;
--qm-ink-strong: #14201a;
--qm-ink-lift: #1d5240;
--qm-text: #4a5a52;
--qm-muted: #6b7a72;
--qm-helper: #a3afa8;
--qm-on-ink: #f0f5f2;
/* ---- Borders ---- */
--qm-border: #e3e7e3;
--qm-border-soft: #eef1ee;
--qm-border-strong: #d4dad6;
/* ---- Accent — teal-emerald ---- */
--qm-accent: #1d8a6d;
--qm-accent-soft: rgba(29, 138, 109, 0.10);
--qm-accent-bg: rgba(29, 138, 109, 0.16);
--qm-accent-ink: #173a2f;
/* ---- Warm (fields / categories) ---- */
--qm-warm: #a06820;
--qm-warm-soft: rgba(180, 110, 40, 0.12);
/* ---- Status ---- */
--qm-ok: #2b8a5a;
--qm-ok-soft: rgba(43, 138, 90, 0.12);
--qm-on-dark-soft: #a4d8c1;
/* ---- Dark gradient (verse-of-the-day / sura header / hero) ---- */
--qm-dark-grad: linear-gradient(135deg, #1d5240 0%, #173a2f 100%);
/* ---- Shadows ---- */
--qm-shadow-xs: 0 1px 2px rgba(20, 32, 26, 0.04);
--qm-shadow-sm: 0 1px 3px rgba(20, 32, 26, 0.06);
--qm-shadow-md: 0 4px 12px rgba(20, 32, 26, 0.08);
--qm-shadow-dark: 0 4px 16px rgba(23, 58, 47, 0.25);
/* ---- Radii ---- */
--qm-radius-xs: 6px;
--qm-radius-sm: 8px;
--qm-radius-md: 10px;
--qm-radius-lg: 12px;
--qm-radius-pill: 100px;
/* ---- Spacing scale ---- */
--qm-sp-1: 4px;
--qm-sp-2: 8px;
--qm-sp-3: 12px;
--qm-sp-4: 16px;
--qm-sp-5: 20px;
--qm-sp-6: 24px;
--qm-sp-7: 32px;
--qm-sp-8: 40px;
/* ---- Type sizes ---- */
--qm-fs-label: 11px;
--qm-fs-xs: 12px;
--qm-fs-sm: 13px;
--qm-fs-base: 15px;
--qm-fs-md: 17px;
--qm-fs-lg: 19px;
--qm-fs-xl: 26px;
--qm-fs-h1: 44px;
--qm-fs-stat: 34px;
--qm-fs-ayah: 28px;
--qm-fs-ayah-lg: 32px;
--qm-fs-ayah-hero:30px;
/* ---- Motion ---- */
--qm-dur: 0.15s;
--qm-ease: cubic-bezier(0.4, 0, 0.2, 1);
/* ---- Opacity ramps (from system-extras.css) ---- */
--qm-ink-06: rgba(23, 58, 47, 0.06);
--qm-ink-10: rgba(23, 58, 47, 0.10);
--qm-ink-16: rgba(23, 58, 47, 0.16);
--qm-ink-24: rgba(23, 58, 47, 0.24);
--qm-ink-40: rgba(23, 58, 47, 0.40);
--qm-accent-06: rgba(29, 138, 109, 0.06);
--qm-accent-10: rgba(29, 138, 109, 0.10);
--qm-accent-16: rgba(29, 138, 109, 0.16);
--qm-accent-24: rgba(29, 138, 109, 0.24);
--qm-accent-40: rgba(29, 138, 109, 0.40);
--qm-warm-06: rgba(180, 110, 40, 0.06);
--qm-warm-10: rgba(180, 110, 40, 0.10);
--qm-warm-16: rgba(180, 110, 40, 0.16);
--qm-warm-24: rgba(180, 110, 40, 0.24);
--qm-warm-40: rgba(180, 110, 40, 0.40);
--qm-gold: #c5942d;
--qm-gold-deep: #a56f18;
--qm-gold-06: rgba(197, 148, 45, 0.06);
--qm-gold-10: rgba(197, 148, 45, 0.10);
--qm-gold-16: rgba(197, 148, 45, 0.16);
--qm-gold-24: rgba(197, 148, 45, 0.24);
--qm-blue: #17608d;
--qm-blue-06: rgba(23, 96, 141, 0.06);
--qm-blue-10: rgba(23, 96, 141, 0.10);
--qm-blue-16: rgba(23, 96, 141, 0.16);
--qm-blue-24: rgba(23, 96, 141, 0.24);
/* On-dark text ramp (for dark hero / gradient cards) */
--qm-on-ink-92: rgba(255, 255, 255, 0.92);
--qm-on-ink-72: rgba(255, 255, 255, 0.72);
--qm-on-ink-48: rgba(255, 255, 255, 0.48);
--qm-on-ink-24: rgba(255, 255, 255, 0.24);
--qm-on-ink-12: rgba(255, 255, 255, 0.12);
--qm-on-ink-06: rgba(255, 255, 255, 0.06);
}