/* ════════════════════════════════════════════════════════════════════════ QITS DESIGN TOKENS — quran-in-the-shell Canonical source of truth. Spec: docs/aesthetics.md ──────────────────────────────────────────────────────────────────────── Three layers (W3C DTCG convention): 1. PRIMITIVES raw values, no meaning (--q-amber-500) 2. SEMANTIC intent, what surfaces consume (--bg, --accent, --text) 3. (component tokens live in base.css / per-surface, aliasing semantic) Two modes share ONE primitive ramp: :root → DARK brand mode (the "soul" — coming-soon expression) [data-theme=light] / .theme-light → LIGHT reading mode (parchment) Vendor this file SAME-ORIGIN into each surface. Subdomain CSP is `style-src 'self'` — a cross-origin to the apex is BLOCKED. Do not hardcode colour/space/radius literals in any surface; route every value through a var(--…). One edit here re-skins everything. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── PRIMITIVES ────────────────────────────────────────────────────── */ /* Warm-earth neutrals (void → cream) */ --q-void: #0a0a0e; /* near-black, canonical dark bg */ --q-void-soft: #131318; /* elevated panel on dark */ --q-ink-warm: #1a1612; /* warm-black alt (agent/words lineage) */ --q-walnut: #3e2723; /* deepest brown */ --q-brown: #493d2b; /* band brown (header/footer on dark) */ --q-cream: #f0e3cd; /* primary light text on dark */ --q-parchment: #fbf7f0; /* canonical light-mode bg */ --q-parchment-2: #f5efe0; /* secondary parchment surface */ /* Cream alphas (text de-emphasis on dark) */ --q-cream-dim: rgba(240,227,205,0.65); --q-cream-faint: rgba(240,227,205,0.40); /* Amber / gold accent ramp (unifies the 5 legacy golds) */ --q-amber: #ffb000; /* bright accent — dark-mode primary */ --q-amber-deep: #d68e00; /* accent hover/active on dark */ --q-gold: #b8860b; /* AA-safe gold — light-mode primary */ --q-gold-soft: #c9a028; /* warm gold (muted contexts) */ /* Status hues */ --q-green: #28c840; /* success on dark */ --q-emerald: #1a5d3a; /* success/legal on light (AA on parchment)*/ --q-red: #ff5f57; /* danger */ --q-red-deep: #b3261e; /* danger on light */ --q-teal: #1b6b6d; /* info / secondary accent */ /* Rules / borders */ --q-rule-dark: #2a2a32; /* hairline on dark */ --q-rule-light: #e3d8c2; /* hairline on parchment */ /* ── TYPE PRIMITIVES ───────────────────────────────────────────────── */ /* Latin */ --q-font-ui: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --q-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --q-font-read: 'Crimson Pro', 'Cormorant Garamond', Georgia, serif; --q-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Arabic */ --q-font-kufi: 'Reem Kufi Fun', 'Noto Kufi Arabic', sans-serif; /* display / brand / buttons */ --q-font-naskh: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif; /* body + Qur'anic */ /* ── SPACING SCALE (4px base) ──────────────────────────────────────── */ --q-space-1: 0.25rem; /* 4 */ --q-space-2: 0.5rem; /* 8 */ --q-space-3: 0.75rem; /* 12 */ --q-space-4: 1rem; /* 16 */ --q-space-5: 1.5rem; /* 24 */ --q-space-6: 2rem; /* 32 */ --q-space-7: 3rem; /* 48 */ --q-space-8: 4rem; /* 64 */ /* ── RADIUS ────────────────────────────────────────────────────────── */ --q-radius-sm: 6px; /* inputs, buttons, pills */ --q-radius: 10px; /* cards, panels, terminal frame */ --q-radius-lg: 14px; /* frosted/glass feature blocks */ /* ── ELEVATION ─────────────────────────────────────────────────────── */ --q-shadow-1: 0 12px 40px rgba(0,0,0,0.25); --q-shadow-2: 0 30px 80px rgba(0,0,0,0.60); --q-glow-amber: 0 0 14px rgba(255,176,0,0.50), 0 0 30px rgba(255,176,0,0.24); /* ── MOTION ────────────────────────────────────────────────────────── */ --q-ease: cubic-bezier(0.4, 0, 0.2, 1); --q-dur-fast: 140ms; --q-dur: 240ms; /* ── LAYOUT ────────────────────────────────────────────────────────── */ --q-measure: 72ch; /* max reading width */ --q-page-max: 1080px; /* max content width */ /* ═══ SEMANTIC — DARK BRAND MODE (default) ═════════════════════════════ This is the "soul": cream/amber on near-black, brown bands. */ --bg: var(--q-void); --bg-elev: var(--q-void-soft); --band: var(--q-brown); --text: var(--q-cream); --text-dim: var(--q-cream-dim); --text-faint: var(--q-cream-faint); --accent: var(--q-amber); --accent-hover: var(--q-amber-deep); --on-accent: var(--q-void); /* text/icon ON an accent fill */ --rule: var(--q-rule-dark); --success: var(--q-green); --danger: var(--q-red); --warning: var(--q-amber); --info: var(--q-teal); --glow: var(--q-glow-amber); --shadow: var(--q-shadow-2); --watermark-opacity: 0.10; /* octagram page watermark on dark */ } /* ═══ SEMANTIC — LIGHT READING MODE ════════════════════════════════════ For long-form reading surfaces (reader, mdview, legal). Same primitives, inverted: ink-on-parchment, AA-safe gold accent. Opt in by setting `data-theme="light"` (or class .theme-light) on or a subtree. */ :root[data-theme="light"], .theme-light { --bg: var(--q-parchment); --bg-elev: var(--q-parchment-2); --band: var(--q-walnut); --text: #2a1f1a; /* warm ink — 4.5:1+ on parchment */ --text-dim: #5b4a3c; --text-faint: #8a7866; --accent: var(--q-gold); /* darker gold passes AA on cream */ --accent-hover: #8f6a08; --on-accent: var(--q-parchment); --rule: var(--q-rule-light); --success: var(--q-emerald); --danger: var(--q-red-deep); --warning: #9a6a00; --info: var(--q-teal); --glow: none; --shadow: 0 12px 40px rgba(73,61,43,0.12); --watermark-opacity: 0.06; /* gold octagram on parchment — subtler */ } /* Honour OS preference only where a surface opts in via .theme-auto. */ @media (prefers-color-scheme: light) { :root.theme-auto:not([data-theme="dark"]) { --bg: var(--q-parchment); --bg-elev: var(--q-parchment-2); --band: var(--q-walnut); --text: #2a1f1a; --text-dim: #5b4a3c; --text-faint: #8a7866; --accent: var(--q-gold); --accent-hover: #8f6a08; --on-accent: var(--q-parchment); --rule: var(--q-rule-light); --success: var(--q-emerald); --danger: var(--q-red-deep); --warning: #9a6a00; --glow: none; --shadow: 0 12px 40px rgba(73,61,43,0.12); } }