/* ========================================================= themes.css — Override tema TERANG Aktif saat . Karena semua komponen memakai token dari tokens.css, di sini cukup menimpa tokennya. ========================================================= */ html[data-theme="light"] { color-scheme: light; /* Surfaces */ --bg: #f6f7fc; --bg-deep: #eceef7; --surface: #ffffff; --surface-lift: #f4f6fd; --body-glow-1: rgba(245, 197, 24, 0.07); --body-glow-2: rgba(224, 162, 0, 0.05); /* Text */ --text: #14173a; --muted: #5a6088; --muted-soft: #868bb0; /* Brand (sedikit lebih pekat agar kontras di latar terang) */ --primary: #c79100; --primary-soft: rgba(199, 145, 0, 0.10); --primary-glow: rgba(199, 145, 0, 0.22); --secondary: #e0a200; --on-primary: #14173a; /* teks navy di atas tombol emas (kontras lebih baik) */ --link: #0e7fb0; /* cyan lebih pekat agar terbaca di latar terang */ /* Lines & elevation */ --line: rgba(20, 23, 58, 0.10); --line-strong: rgba(20, 23, 58, 0.16); --shadow: 0 20px 48px rgba(30, 34, 70, 0.14); --shadow-sm: 0 8px 24px rgba(30, 34, 70, 0.10); /* Card / hero surfaces */ --card-bg: linear-gradient(160deg, #ffffff, #f2f5fd); --card-glow-a: rgba(199, 145, 0, 0.06); --card-glow-b: rgba(199, 145, 0, 0.03); --card-border: rgba(199, 145, 0, 0.14); --hero-bg: linear-gradient(150deg, #ffffff, #f2f5fd); --hero-border: rgba(199, 145, 0, 0.24); --tile-bg: rgba(20, 23, 58, 0.03); --nav-mobile-bg: #ffffff; --header-bg: rgba(255, 255, 255, 0.85); /* Footer */ --footer-bg: #eceef7; --footer-text: #14173a; --footer-muted: #5a6088; --footer-link-hover: #c79100; --meta-theme: #ffffff; } /* --- Tema terang: HEADER tetap "berbrand" (navy-biru seperti latar logo) --- Body tetap terang, tapi header memakai latar navy-biru + teks terang + emas cerah + garis bawah emas, sehingga logo (badge navy + emas/cyan) menyatu dan identitas brand tetap kuat di mode terang. Token di-scope ke .site-header saja, jadi hanya header (beserta submenu & mobile nav di dalamnya) yang berubah. */ html[data-theme="light"] .site-header { color: var(--text); border-bottom-color: rgba(245, 197, 24, 0.22); --header-bg: rgba(12, 16, 56, 0.95); --text: #eef0ff; --muted: #aab0dd; --muted-soft: #7f85b4; --primary: #f5c518; --primary-soft: rgba(245, 197, 24, 0.16); --secondary: #e0a200; --on-primary: #0c0e2a; --line: rgba(238, 240, 255, 0.10); --line-strong: rgba(238, 240, 255, 0.18); --tile-bg: rgba(255, 255, 255, 0.08); --nav-mobile-bg: #141a44; --shadow: 0 22px 50px rgba(6, 9, 30, 0.35); }