/* ═══════════════════════════════════════════════════════════════════════════ نقاء — design tokens · «حديث ومشرق» ═══════════════════════════════════════════════════════════════════════════ THE ONE PLACE A VALUE IS DECIDED — AND THIS TIME IT IS TRUE. The previous version of this file opened by claiming that nothing outside it wrote a colour. site.css held 214 raw colour literals across 143 distinct values: nine different golds (#d4af37, #C8A342, #C59A27, #D8B758, #B8860B, #b8860b, #f6d365, #f1c40f, rgba(218,165,32,…)) and eleven different greens (#0f5a46, #07382B, #063B2D, #052F24, #0C4E3D, #0A4535, #184635, #0d2d21, #082117, #030f0a, #152520). The cure this file was written to be had been applied to about a third of the stylesheet and then abandoned, and the header was never corrected — so the file most likely to be trusted was the file most confidently wrong. That is not a tidiness complaint. It is why «غيّر الاستايل» was not a small edit: with 143 hardcoded colours, a change of palette is 143 separate decisions, and so it never happens. scripts/check_design_tokens.py now fails the build on a raw colour anywhere but here, which is what makes the next change of direction one file instead of a fortnight. THE DIRECTION. Bright and modern: a warm near-white ground, نقاء's green as the single accent, hairline borders instead of glows, flat fills instead of gradients. Gold is no longer the page — it is kept for القرآن itself, the mushaf paper and the آية band, where it means something. THE RULES THIS FILE IS HELD TO ------------------------------ 1. No colour is written outside this file. Enforced. 2. Every scale is geometric, not arbitrary — two steps apart always looks two steps apart. 3. Names say what a thing IS, not what it looks like: `--surface-raised` survives a change of palette, `--dark-teal-2` does not. Which is exactly why this rewrite touched one file and not four hundred declarations. 4. Text tokens are checked against their own ground. Every pairing below that carries prose clears 4.5:1; the two that clear only 3:1 are marked and are used at display sizes only. ═════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Palette ────────────────────────────────────────────────────────── Raw hues live here and nowhere else. Four families: a warm neutral for ground and paper, an ink for type, نقاء's green for everything that acts, and a restrained gold for القرآن. */ /* Warm neutrals — the ground. Not pure grey: a flat #fff page under Cairo at 1.9 line-height reads clinical, and this is not a dashboard. */ --hue-white: #ffffff; --hue-sand-50: #fbf9f5; --hue-sand-100: #f4f1ea; --hue-sand-200: #ece7dc; --hue-sand-300: #ddd6c7; /* Ink — green-black rather than neutral black, so body text belongs to the same family as the accent instead of sitting on top of it. */ --hue-ink: #10231d; --hue-ink-soft: #41544c; --hue-ink-faint: #64756d; /* نقاء green. `--hue-green` is the working colour: 4.9:1 on the page ground and 5.2:1 under white text, so the same value is legible as type AND as a button fill. That is the whole reason it is this exact green. */ --hue-green: #0e7c58; --hue-green-lit: #13a074; --hue-green-deep: #0a5c41; --hue-green-dark: #063a2a; --hue-green-tint: #e8f5ef; /* Gold, demoted. `--hue-gold-deep` is the only one that carries small text (5.0:1); `--hue-gold` is for ornament and hairlines, `--hue-gold-lit` for fills and highlights, and neither is ever asked to be readable. */ --hue-gold-deep: #8a6310; --hue-gold: #b58b20; --hue-gold-soft: #cea63c; --hue-gold-lit: #e0b955; --hue-gold-light: #f0d68c; --hue-gold-tint: #fbf2dc; --hue-gold-muted: rgba(181, 139, 32, 0.55); /* Paper — the mushaf surface, and the one place the site is allowed to be warmer than its own ground. */ --hue-paper: #fffdf7; --hue-paper-edge: #f2ead6; /* The silk bookmark keeps its red. It is the one saturated colour left on the site, and it earns it: it is a physical object lying on a paper page, not a piece of interface. */ --hue-ribbon: #9c1620; /* The geometric tile under the whole page. It lives here and not in site.css because a colour inside a data: URI is still a colour — and putting it in the stylesheet would mean the one rule this file is built on needed an exception, which is how exceptions start. */ --pattern-geometry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%230e7c58' stroke-width='0.7' stroke-opacity='0.045'%3E%3Cpath d='M48 0 L96 48 L48 96 L0 48 Z'/%3E%3Cpolygon points='48,14 82,48 48,82 14,48'/%3E%3Cpolygon points='48,26 70,48 48,70 26,48'/%3E%3Ccircle cx='48' cy='48' r='34'/%3E%3Ccircle cx='48' cy='48' r='16'/%3E%3Cpath d='M0 0 L96 96 M96 0 L0 96'/%3E%3Crect x='29' y='29' width='38' height='38' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E"); /* Names the previous palette used that other sheets still read. Kept pointing at the nearest thing in this one rather than deleted, so a page outside index.html cannot silently lose a declaration. */ --hue-night: var(--hue-ink); --hue-teal-deep: var(--hue-green-dark); --hue-teal: var(--hue-green-deep); --hue-emerald: var(--hue-green); --hue-parchment: var(--hue-ink); --hue-ink-warm: #2b1f02; /* ── State ──────────────────────────────────────────────────────────── Replacing the flat-UI set the stylesheet had accumulated — #2ecc71, #e74c3c, #f1c40f, #3498db — four saturated colours from a different palette entirely, which is why a «متصل» pill and a «مباشر» badge never looked like they came from the same site. Each state is a readable foreground and a tint to sit it on. */ --state-ok: #0e7c58; --state-ok-tint: #e4f4ec; --state-warn: #8f5e0a; --state-warn-tint: #fbf1dc; --state-error: #b32d22; --state-error-tint: #fbeae8; --state-info: #15688f; --state-info-tint: #e6f2f8; /* ── Surfaces ───────────────────────────────────────────────────────── A card never picks a colour; it picks a level. On a light ground the levels run the other way from a dark one: raised means *whiter*, and separation comes from a hairline rather than from a glow. */ --surface-page: var(--hue-sand-50); --surface-sunk: var(--hue-sand-100); --surface-raised: var(--hue-white); --surface-lifted: var(--hue-white); --surface-inset: var(--hue-sand-100); --surface-mushaf: var(--hue-paper); --surface-accent: var(--hue-green-tint); --surface-accent-solid: var(--hue-green); --surface-gold: var(--hue-gold-tint); --surface-inverse: var(--hue-ink); /* The nav floats over content and has to stay legible over both the page and a card that scrolls under it. */ --surface-nav: rgba(251, 249, 245, 0.82); --surface-nav-lifted: rgba(251, 249, 245, 0.96); /* Scrims and veils — the only alpha-over-content values on the site. */ --veil-ink: rgba(16, 35, 29, 0.55); --veil-light: rgba(255, 255, 255, 0.72); --veil-faint: rgba(255, 255, 255, 0.45); /* ── Text ───────────────────────────────────────────────────────────── Three weights of attention, each measured against --surface-page: strong 15.4:1 · body 7.6:1 · faint 4.5:1. There is deliberately no fourth, because a fourth would be below AA and would exist only to look quiet. */ --text-strong: var(--hue-ink); --text-body: var(--hue-ink-soft); --text-faint: var(--hue-ink-faint); --text-accent: var(--hue-green); --text-gold: var(--hue-gold-deep); --text-on-accent: var(--hue-white); --text-on-gold: var(--hue-ink); --text-inverse: var(--hue-sand-50); /* ── Lines ──────────────────────────────────────────────────────────── Hairlines are the structure now. On white, a 1px ink line at 12% does the work six pixels of gold glow used to do, and it does it at every zoom. */ --line-faint: rgba(16, 35, 29, 0.07); --line: rgba(16, 35, 29, 0.13); --line-strong: rgba(16, 35, 29, 0.24); --line-accent: rgba(14, 124, 88, 0.38); --line-gold: rgba(181, 139, 32, 0.34); /* ── Space ──────────────────────────────────────────────────────────── A 4px base on a roughly-1.5 ratio. Every margin and every padding on the site comes from these nine and nothing else, which is what makes two unrelated sections agree without anybody measuring. */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 36px; --space-xl: 54px; --space-2xl: 80px; --space-3xl: 120px; /* Section rhythm — fluid, so a phone is not given a desktop's silence. */ --space-section: clamp(var(--space-xl), 8vw, var(--space-2xl)); /* ── Type ───────────────────────────────────────────────────────────── One fluid modular scale, eight steps, ratio ≈1.25. Every size on the site is one of these. */ --text-2xs: clamp(11px, 0.9vw + 9px, 12px); --text-xs: clamp(12px, 1.0vw + 10px, 13px); --text-sm: clamp(13px, 1.2vw + 11px, 15px); --text-md: clamp(15px, 1.4vw + 12px, 17px); --text-lg: clamp(17px, 2.0vw + 13px, 21px); --text-xl: clamp(21px, 3.0vw + 14px, 28px); --text-2xl: clamp(26px, 4.2vw + 15px, 40px); --text-3xl: clamp(38px, 7.0vw + 16px, 72px); --leading-tight: 1.25; --leading-snug: 1.5; --leading-body: 1.9; /* Arabic needs more air than Latin at the same size */ --weight-regular: 400; --weight-medium: 600; --weight-bold: 800; --font-quran: 'Amiri', serif; --font-ui: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif; /* ── Radius ─────────────────────────────────────────────────────────── Tightened one step across the board. The old scale was drawn for cards that glowed; a hairline card at 24px reads soft rather than crisp, and «حديث» is mostly this. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* ── Elevation ──────────────────────────────────────────────────────── Three steps, and all of them quieter than what they replace. On a dark ground a shadow is the only way to lift something; on this one the border already separates the card, so the shadow only has to say «above», not «here». Ink-tinted rather than black — a neutral black shadow on a warm ground greys it. */ --shadow-sm: 0 1px 2px rgba(16, 35, 29, 0.05), 0 1px 3px rgba(16, 35, 29, 0.04); --shadow-md: 0 1px 2px rgba(16, 35, 29, 0.04), 0 8px 24px rgba(16, 35, 29, 0.07); --shadow-lg: 0 2px 4px rgba(16, 35, 29, 0.04), 0 20px 48px rgba(16, 35, 29, 0.10); --shadow-accent: 0 10px 28px rgba(14, 124, 88, 0.22); --shadow-gold: 0 10px 28px rgba(181, 139, 32, 0.20); /* A focus ring, and a token for it. It was `--hue-gold-soft` read directly out of the palette, which on a near-white page is a pale yellow line on cream — the one element on the site that exists to be unmistakable. */ --focus-ring: var(--hue-green); /* ── Motion ─────────────────────────────────────────────────────────── Two durations and two curves. Everything that moves picks a pair, so the whole page moves at one tempo. */ --ease-out: cubic-bezier(0.22, 0.85, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --speed-fast: 160ms; --speed-medium: 280ms; /* The reveal is slower than any hover on purpose: a hover answers a pointer that is already there, a reveal introduces something that was not. */ --speed-reveal: 620ms; --speed-slow: 420ms; --speed-float: 4500ms; /* ── Layout ─────────────────────────────────────────────────────────── One content width, one reading measure. A paragraph wider than about 70 characters is hard to come back to after a line break — more so in Arabic, where the eye has fewer word-shape cues to find its place. */ --shell-width: 1140px; --measure: 62ch; --nav-height: 68px; }