/* ============================================================= colors.css — Hayfala Quran Color Config ⚙️ UBAH WARNA DI SINI untuk update seluruh aplikasi. File ini di-load SEBELUM base.css di semua halaman. ============================================================= */ :root { /* ── BRAND / ICON ─────────────────────────────────────────── */ --brand: #3629D0; /* Warna utama icon = violet-dk */ --brand-dk: #2A1FA8; /* Brand darker (hover) */ --brand-lt: #EEECFF; /* Brand light (background) = violet-lt */ /* ── ACCENT COLORS ────────────────────────────────────────── */ --violet: #4F3EF5; /* Link & active nav */ --violet-dk: #3629D0; /* Violet hover */ --violet-lt: #EEECFF; /* Violet background */ --amber: #D97A28; /* Warning & streak */ --amber-lt: #FDF1E7; /* Amber background */ --sage: #1B7B4B; /* Sukses & wakaf hijau */ --sage-lt: #EAF4EF; /* Sage background */ /* ── INK (TEKS & BORDER) ──────────────────────────────────── */ --ink-900: #0A0A0F; --ink-700: #1C1C28; --ink-500: #4B4B63; --ink-300: #8E8EA8; --ink-200: #c8c8d8; --ink-100: #E8E8F0; --ink-050: #F4F4F8; --white: #FFFFFF; /* ── SHADOW & RADIUS ──────────────────────────────────────── */ --s1: 0 1px 3px rgba(10, 10, 15, .06); --s2: 0 3px 12px rgba(10, 10, 15, .08); --max: 680px; --r-s: 10px; --r-m: 16px; --r-l: 20px; --r-xl: 26px; } /* ============================================================= 🌙 DARK THEME Aktif saat ============================================================= */ html[data-theme="dark"] { /* ── BRAND / ICON (sedikit lebih cerah di dark) ────────── */ --brand: #6C5EFA; --brand-dk: #5B4EE8; --brand-lt: rgba(108, 94, 250, .12); /* ── ACCENT COLORS ────────────────────────────────────── */ --violet: #7B6FFF; --violet-dk: #6C5EFA; --violet-lt: rgba(123, 111, 255, .12); --amber: #F0922E; --amber-lt: rgba(240, 146, 46, .12); --sage: #2ECC71; --sage-lt: rgba(46, 204, 113, .12); /* ── INK (TEKS & BORDER) - Dark Mode ──────────────────── */ --ink-900: #F0F0F5; --ink-700: #D0D0DE; --ink-500: #9898B0; --ink-300: #5C5C78; --ink-200: #3A3A50; --ink-100: #2A2A3A; --ink-050: #1A1A26; --white: #12121A; /* ── SHADOW (lebih gelap + glow halus) ─────────────────── */ --s1: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .03); --s2: 0 3px 12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04); }