/* css/variables.css */ /* 1. VARIABEL DEFAULT (LIGHT MODE) */ :root { --primary-color: #0F5132; --secondary-color: #198754; --accent-color: #D4AF37; --bg-body: #F0F2F5; /* Latar Belakang Terang */ --bg-card: #FFFFFF; /* Kartu Putih */ --text-main: #212529; /* Teks Gelap */ --text-muted: #6c757d; --shadow-sm: 0 2px 8px rgba(0,0,0,0.1); --shadow-md: 0 5px 15px rgba(0,0,0,0.15); --font-latin: sans-serif; --font-arab: 'Amiri', serif; --transition-fast: 0.3s ease; } /* 2. VARIABEL DARK MODE */ /* Selektor ini mencocokkan atribut data-theme="dark" di */ [data-theme="dark"] { --primary-color: #4ade80; /* Hijau Terang Neon */ --secondary-color: #22c55e; --bg-body: #121212; /* Latar Belakang Hitam */ --bg-card: #1E1E1E; /* Kartu Abu Gelap */ --text-main: #e0e0e0; /* Teks Putih */ --text-muted: #a0a0a0; --shadow-sm: 0 2px 8px rgba(0,0,0,0.5); --shadow-md: 0 5px 15px rgba(0,0,0,0.7); } /* Pastikan Body mengikuti warna background variabel */ body { background-color: var(--bg-body); color: var(--text-main); transition: background-color 0.3s, color 0.3s; /* Animasi Halus */ }