/* ══════════════════════════════════════════════════════════════════ IKHLAS COMMUNITY CENTRE — "NŪR: Light & Geometry" tokens.css · design system foundation Palette, type, spacing, reset + legacy aliases (nothing removed) ══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500;1,6..72,600&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;600;700&display=swap'); :root { /* ── Core surfaces (night sky → light) ───────────────────────── */ --midnight: #060d1a; /* deepest void, behind the 3D scene */ --navy: #0a1628; /* brand base (kept) */ --navy2: #0f1f3d; --navy3: #162445; --navy4: #1e2f54; --navy5: #253660; --ink: #050a14; /* ── Light: emerald + brass ──────────────────────────────────── */ --green: #10b981; /* kept */ --green-light: #34d399; /* kept */ --green-deep: #0a8f63; --green-dim: rgba(16,185,129,0.15); --green-line: rgba(16,185,129,0.22); --green-glow: rgba(16,185,129,0.45); --brass: #d4a548; /* refined gold — "the light" */ --brass-light: #f0c46a; --brass-glow: rgba(212,165,72,0.40); --gold: #f59e0b; /* kept (legacy refs) */ --gold-dim: rgba(245,158,11,0.15); /* ── Text (pearl) ────────────────────────────────────────────── */ --white: #e8f0f8; /* kept */ --pearl: #eef4fb; --white-dim: rgba(232,240,248,0.74); --white-faint: rgba(232,240,248,0.34); --white-ultra: rgba(232,240,248,0.07); /* ── Type families ───────────────────────────────────────────── */ --font-display: 'Newsreader', 'Playfair Display', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --font-arabic: 'Noto Naskh Arabic', serif; /* ── Type scale (fluid, refined) ─────────────────────────────── */ --fs-display: clamp(44px, 7.5vw, 104px); --fs-h1: clamp(36px, 6vw, 74px); --fs-h2: clamp(30px, 4.6vw, 56px); --fs-h3: clamp(22px, 2.6vw, 32px); --fs-lead: clamp(16px, 1.5vw, 20px); --fs-body: clamp(15px, 1.1vw, 16px); --fs-small: 13px; --fs-eyebrow: 12px; /* ── Spacing / shape ─────────────────────────────────────────── */ --pad: clamp(20px, 5vw, 80px); --maxw: 1280px; --radius: 14px; --radius-sm: 9px; --radius-lg: 26px; /* ── Motion ──────────────────────────────────────────────────── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.6s; /* ── Light-leak gradients (mashrabiya glow) ──────────────────── */ --glow-emerald: radial-gradient(circle at 50% 0%, rgba(16,185,129,0.20), transparent 60%); --glow-brass: radial-gradient(circle at 50% 50%, rgba(212,165,72,0.18), transparent 65%); /* ── Theme bridge (kept — used by toggleTheme) ───────────────── */ --bg-primary: #0a1628; --bg-secondary: #0f1f3d; --bg-tertiary: #162445; --text-primary: #e8f0f8; --text-secondary: rgba(232,240,248,0.76); --border-color: rgba(232,240,248,0.08); } /* Light theme (toggleTheme adds .light-mode to ) */ body.light-mode { --bg-primary: #f6f4ee; --bg-secondary: #ffffff; --bg-tertiary: #eee9dd; --text-primary: #16233b; --text-secondary: rgba(22,35,59,0.62); --border-color: rgba(22,35,59,0.10); --white: #16233b; --white-dim: rgba(22,35,59,0.66); --white-faint: rgba(22,35,59,0.22); --white-ultra: rgba(22,35,59,0.06); --pearl: #16233b; } /* ── Reset ─────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--midnight); color: var(--text-primary); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.65; overflow-x: hidden; cursor: default; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background 0.5s var(--ease-soft), color 0.5s var(--ease-soft); } input, select, textarea { font-size: 16px !important; } button, a, [role="button"] { touch-action: manipulation; } img { max-width: 100%; display: block; } /* Accessible focus — visible, brand-tinted */ :focus-visible { outline: 2px solid var(--brass-light); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--green); color: var(--midnight); } /* Brass-on-navy scrollbar */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--midnight); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--green-deep), var(--brass)); border-radius: 10px; border: 2px solid var(--midnight); } /* ── Light mode: remap surface tokens so every component flips ──── */ body.light-mode { --midnight: #efe9dd; /* warm paper base */ --navy: #f6f1e7; --navy2: #ffffff; --navy3: #f7f3ea; --navy4: #ece5d6; --navy5: #ddd4c2; --ink: #e7e1d3; --green-dim: rgba(16,185,129,0.12); --green-line: rgba(16,185,129,0.30); --green-glow: rgba(16,185,129,0.30); --gold-dim: rgba(212,165,72,0.16); --brass-glow: rgba(212,165,72,0.30); --glow-emerald: radial-gradient(circle at 50% 0%, rgba(16,185,129,0.12), transparent 60%); --glow-brass: radial-gradient(circle at 50% 50%, rgba(212,165,72,0.12), transparent 65%); } body.light-mode .hero-bg { background: radial-gradient(120% 90% at 50% -10%, #fffdf8, transparent 55%), radial-gradient(80% 70% at 80% 110%, rgba(212,165,72,0.12), transparent 60%), radial-gradient(70% 70% at 15% 100%, rgba(16,185,129,0.10), transparent 60%), var(--midnight); } body.light-mode .btn-outline { color: var(--text-primary); } body.light-mode ::-webkit-scrollbar-track { background: var(--midnight); }