/* ============================================================================ tokens.css — design tokens for Al-Mostaneer (ProcessWire) ---------------------------------------------------------------------------- Two layers: 1. Primitives (--_*) raw palette. Never used directly in components. 2. Semantics (--role) what a colour is FOR. Components use ONLY these. Theme model (deliberately duplication-free): :root = light theme (the default). html.theme-dark = dark theme (ONE override block; no @media duplication). "Auto" is resolved to an explicit class before paint by the inline script in head.php, so the CSS never needs a @media(prefers-color-scheme) copy of the dark values. Change a dark value in exactly one place. All text/background pairs verified against WCAG 2.2 (ratios noted inline). ========================================================================== */ :root { color-scheme: light; /* ---- Layer 1 · primitives ------------------------------------------- */ /* Qur'an green (light lower number → lighter) */ --_green-050: #eaf1ec; /* section tint (light) */ --_green-100: #d6e4db; /* badge / subtle fill (light) */ --_green-300: #7ad3ac; /* headings on dark bg (dark mode) */ --_green-350: #5cc39a; /* links on dark bg (dark mode) */ --_green-500: #186a4c; /* links (light) 6.55:1 on #fff */ --_green-600: #155a41; /* chrome + pill bg (light) white 8.17:1 AAA */ --_green-700: #134d38; /* headings / link-hover (light) 9.78:1 on #fff */ --_green-750: #0f4a36; /* focus ring (light) 8.91:1 on cream */ --_green-860: #1a3a2e; /* subtle surface (dark) */ --_green-900: #143226; /* card bg (dark) */ --_green-910: #0e241b; /* page bg (dark) */ --_green-920: #0c1f17; /* section tint (dark) */ --_green-950: #0a1c15; /* chrome bg (dark) */ /* Gold */ --_gold-400: #e8c86a; /* light accent on dark surfaces */ --_gold-500: #d4a84a; /* pill bg (dark) #111 text 8.54:1 AAA */ --_gold-600: #d9b24e; /* accent + focus (dark) 8.10:1 on dark page */ --_gold-700: #a97f16; /* accent (light) 3.19:1 on cream — non-body */ --_gold-100: rgba(169,127,22,.12); /* faint tint (light) */ --_gold-110: rgba(217,178,78,.12); /* faint tint (dark) */ /* Neutrals */ --_white: #ffffff; --_cream: #f4efe2; /* page (light) */ --_cream-2: #efe7d6; /* alt row / raised input (light) */ --_cream-3: #ece2cc; /* warm section band (light) */ --_ink: #111111; /* body text (light) 16.45:1 on cream AAA */ --_ink-2: #43483f; /* secondary text (light) 8.18:1 */ --_ink-3: #575c53; /* muted text (light) 5.98:1 */ --_line: #e2dbc9; /* borders (light) */ --_paper: #e8e4dc; /* body text (dark) 12.87:1 on page AAA */ --_paper-2: #d2cec4; /* secondary text (dark) 10.39:1 — brightened */ --_paper-3: #b4b0a6; /* muted text (dark) 7.54:1 — brightened */ /* ---- Layer 2 · semantics -------------------------------------------- */ --bg-page: var(--_cream); --bg-section: var(--_green-050); --bg-band: var(--_cream-3); --bg-alt: var(--_cream-2); --bg-card: var(--_white); --bg-input: var(--_white); --bg-chrome: var(--_green-600); --chrome-text: var(--_white); /* constant: header/footer sit on green in both modes */ --text-body: var(--_ink); --text-secondary: var(--_ink-2); --text-muted: var(--_ink-3); --link: var(--_green-500); --link-hover: var(--_green-700); --heading: var(--_green-700); --subtle-bg: var(--_green-100); --subtle-text: var(--_green-700); --pill-bg: var(--_green-600); --pill-hover: var(--_green-700); --pill-text: var(--_white); --accent: var(--_gold-700); /* underlines, small ornament — never body-size text */ --accent-faint: var(--_gold-100); --border: var(--_line); --border-strong:var(--_green-100); --focus: var(--_green-750); --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-card: 0 2px 8px rgba(0,0,0,.07); --shadow-pop: 0 8px 24px rgba(0,0,0,.14); /* ---- Non-colour tokens ---------------------------------------------- */ --radius: 8px; --radius-sm: 5px; --radius-pill: 999px; /* spacing scale — use these for section rhythm so margins don't fight */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --container: 1160px; --measure: 66ch; /* comfortable reading width for longform */ --header-h: 68px; --edge: clamp(1rem, 4vw, 2rem); --font-body: "Noto Naskh Arabic", "Amiri", Georgia, serif; --font-quran: "AmiriQuran", "Amiri", "Noto Naskh Arabic", serif; --fs-base: 1.15rem; --lh-base: 1.85; --fs-h1: clamp(1.7rem, 4vw, 2.15rem); --fs-h2: clamp(1.4rem, 3vw, 1.6rem); --fs-h3: 1.3rem; --fs-sm: .95rem; --fs-xs: .82rem; } /* ---- Dark theme · single override block -------------------------------- */ html.theme-dark { color-scheme: dark; --bg-page: var(--_green-910); --bg-section: var(--_green-920); --bg-band: var(--_green-920); --bg-alt: var(--_green-860); --bg-card: var(--_green-900); --bg-input: var(--_green-900); --bg-chrome: var(--_green-950); --text-body: var(--_paper); --text-secondary: var(--_paper-2); --text-muted: var(--_paper-3); --link: var(--_green-350); --link-hover: var(--_green-300); --heading: var(--_green-300); --subtle-bg: var(--_green-860); --subtle-text: var(--_green-300); --pill-bg: var(--_gold-500); --pill-hover: var(--_gold-600); --pill-text: var(--_ink); --accent: var(--_gold-600); --accent-faint: var(--_gold-110); --border: rgba(255,255,255,.09); --border-strong:var(--_green-860); --focus: var(--_gold-600); --shadow-sm: 0 1px 4px rgba(0,0,0,.40); --shadow-card: 0 2px 8px rgba(0,0,0,.50); --shadow-pop: 0 8px 24px rgba(0,0,0,.65); }