/* ═══════════════════════════════════════════════ ZBApex — Design Tokens Include this first in every page's ═══════════════════════════════════════════════ */ :root { /* ── Neutrals (mid-dark charcoal/slate palette) ── */ --n900: #111827; --n800: #18202F; --n750: #1E2840; --n700: #232D42; --n600: #283856; --n500: #2E4063; /* ── Gold brand accent (vivid amber) ── */ --gold: #E8B84A; --gold-l: #F5D278; --gold-d: #C4922A; --gold-glow: rgba(232, 184, 74, 0.22); /* ── Base ── */ --white: #FFFFFF; --tl: #A8BCCF; /* text-light */ --tm: #6E8AA8; /* text-muted */ /* ── Derived tokens — ALL overridden at runtime by theme.js ── Never hardcode rgba() in component CSS — use these instead. ── */ /* Footer — always dark, even on Desert Light */ --footer-bg: var(--n900); --contact-bg: var(--n750); --footer-text: var(--tl); --footer-text-muted: var(--tm); --footer-logo-text: var(--white); --footer-border: rgba(255, 255, 255, 0.05); --footer-s-btn-bg: rgba(255, 255, 255, 0.04); --footer-s-btn-bdr: rgba(255, 255, 255, 0.07); --nav-text: rgba(255, 255, 255, 0.72); --nav-text-hover: rgba(255, 255, 255, 1.00); /* Topbar — separate token so Desert Light can keep a dark topbar strip */ --topbar-bg: var(--n900); --topbar-border: var(--gold-a12); /* Cold-side accent (globe continent outlines, cold-country dots, blue planes) Dark themes = sky blue. Desert Light = warm sandy to stay on-palette. */ --cold-rgb: 100, 170, 240; --cold-hex: #64AAF0; /* Navbar / hero surface backgrounds */ --nav-bg: rgba(24, 32, 47, 0.97); --card-bg: rgba(30, 40, 64, 0.92); --stats-bg: rgba(17, 24, 39, 0.72); /* Hero sky gradient stops */ --sky-start: #111827; --sky-mid: #18202F; --sky-end: #1E2840; --sky-b1: rgba(28, 55, 110, 0.82); --sky-b2: rgba(18, 36, 72, 0.65); --sky-b3: rgba(14, 28, 58, 0.45); /* ── Page section & card surfaces (white-overlay for dark themes) ── */ --section-alt: rgba(11, 21, 37, 0.50); /* .hp-section--alt bg */ --surface-1: rgba(255, 255, 255, 0.025); /* main card bg */ --surface-2: rgba(255, 255, 255, 0.030); /* tab / lighter bg */ --surface-3: rgba(255, 255, 255, 0.035); /* search-box bg */ --surface-4: rgba(255, 255, 255, 0.040); /* hero badge bg */ --surface-input: rgba(255, 255, 255, 0.050); /* input field bg */ --input-hover: rgba(255, 255, 255, 0.070); /* input hover/focus bg */ --cat-overlay: rgba(4, 8, 15, 0.85); /* blog cat badge overlay */ --thumb-dark: rgba(11, 21, 37, 0.80); /* blog thumb gradient */ /* ── Border opacity tokens ── */ --border-soft: rgba(255, 255, 255, 0.06); --border-mid: rgba(255, 255, 255, 0.07); --border-med: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.09); --border-bold: rgba(255, 255, 255, 0.10); /* ── Translucent text tokens ── */ --text-faint: rgba(255, 255, 255, 0.55); --text-dim: rgba(255, 255, 255, 0.72); --text-body: rgba(255, 255, 255, 0.75); --text-strong: rgba(255, 255, 255, 0.88); /* ── Gold at every opacity used across the site ── */ --gold-a04: rgba(232, 184, 74, 0.04); --gold-a05: rgba(232, 184, 74, 0.05); --gold-a06: rgba(232, 184, 74, 0.06); --gold-a07: rgba(232, 184, 74, 0.07); --gold-a08: rgba(232, 184, 74, 0.08); --gold-a09: rgba(232, 184, 74, 0.09); --gold-a10: rgba(232, 184, 74, 0.10); --gold-a12: rgba(232, 184, 74, 0.12); --gold-a15: rgba(232, 184, 74, 0.15); --gold-a16: rgba(232, 184, 74, 0.16); --gold-a18: rgba(232, 184, 74, 0.18); --gold-a20: rgba(232, 184, 74, 0.20); --gold-a22: rgba(232, 184, 74, 0.22); --gold-a25: rgba(232, 184, 74, 0.25); --gold-a30: rgba(232, 184, 74, 0.30); --gold-a35: rgba(232, 184, 74, 0.35); --gold-a38: rgba(232, 184, 74, 0.38); --gold-a40: rgba(232, 184, 74, 0.40); --gold-a45: rgba(232, 184, 74, 0.45); --gold-a50: rgba(232, 184, 74, 0.50); --gold-a55: rgba(232, 184, 74, 0.55); --gold-a65: rgba(232, 184, 74, 0.65); --gold-a70: rgba(232, 184, 74, 0.70); /* ── Fonts ── */ --en: 'Outfit', sans-serif; --ur: 'Scheherazade New', serif; /* SIL Naskh standard — newspapers, gov sites */ --ar: 'Cairo', sans-serif; /* Most-used modern Arabic web font */ }