/* ============================================================================ BLUE CRESCENT · الهلال الأزرق — DESIGN TOKENS "The Lit Vault" — midnight grounds, crescent-silver structure, teal-aurora light, one reserved brass warmth. Edit values here to retune the entire site. ========================================================================== */ :root { /* — Midnight grounds (the vault — ~90% of every screen) — */ --void: #050912; /* deepest backdrop, un-lit start of the journey */ --vault: #0a1428; /* primary section ground (vault stone) */ --mass: #0f1e3d; /* raised stone — cards, niches, panels */ --lit-face: #16294f; /* lit face of stone — borders, brighter surfaces */ --lit-face-2:#1d3463; /* highest-lit stone, hover faces */ /* — Crescent-silver (text + engraved structure) — */ --silver-hi: #e8ecf4; /* highest-key headlines, the moon, primary ink */ --silver: #c7d2e0; /* secondary text, engraved hairlines */ --silver-lo: #aeb8ce; /* tertiary text; AA-safe floor for small copy */ --tarnish: #8fa0bc; /* captions, tick-marks, section indices at rest */ /* — Teal-aurora (light — the navigational ~3%) — */ --teal: #4fd9e0; /* the light-shaft, active / "you are here" */ --aurora: #7fa8ff; /* gradient companion for shaft + glows */ /* — The single reserved warm (wellness / homecoming) — */ --brass: #c9a227; --brass-hi: #e8b873; /* — Lines & glows — */ --hairline: rgba(232, 236, 244, .14); --hairline-2:rgba(232, 236, 244, .26); --glow-teal: rgba(79, 217, 224, .30); --glow-brass:rgba(232, 184, 115, .26); /* — Gradients — */ --grad-shaft: linear-gradient(180deg, transparent, var(--aurora) 22%, var(--teal) 62%, transparent); --grad-silver: linear-gradient(180deg, #f3f6fb, var(--silver-hi) 55%, var(--silver-lo)); --grad-vault: radial-gradient(135% 120% at 68% 8%, #11223f 0%, var(--vault) 46%, var(--void) 100%); /* — The brightening spine: written 0→1 by scroll. — */ --lumen: 0; /* — Type system — defaults set per-language on below — */ --font-display: 'Reem Kufi', 'Fraunces', Georgia, serif; --font-body: 'IBM Plex Sans Arabic', 'Inter Tight', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; --font-seal: 'Reem Kufi', serif; /* — Fluid type scale — */ --fs-mega: clamp(3.1rem, 9vw, 8.5rem); --fs-h1: clamp(2.6rem, 6.5vw, 5.5rem); --fs-h2: clamp(2rem, 4.4vw, 3.6rem); --fs-h3: clamp(1.25rem, 2vw, 1.7rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem); --fs-body: 1.02rem; --fs-mono: .76rem; --fs-ghost: clamp(7rem, 22vw, 20rem); /* — Rhythm & shape — */ --space-section: clamp(5.5rem, 11vw, 11rem); --wrap: 1280px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --shaft-x: 38%; /* off-axis position of the light-shaft (from inline-start) */ /* — Motion — */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s; } /* Language-driven type swap. Arabic is the default (RTL). */ html[data-lang="ar"] { --font-display: 'Reem Kufi', Georgia, serif; --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif; } html[data-lang="en"] { --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter Tight', system-ui, sans-serif; }