/* ============================================================ SCAFOLYA — TEMA GELAP (DEC-076) ------------------------------------------------------------ Hanya menimpa TOKEN semantik; tidak ada satu pun aturan komponen di sini. Diimpor setelah tokens.css sehingga seluruh komponen otomatis ikut berubah. Tema disetel oleh awal.js pada sebelum halaman digambar (tanpa kedip). Tanpa JavaScript, situs tetap memakai tema terang. Palet: dasar tinta navy (bukan abu netral) agar tetap satu keluarga dengan logo #012A6A. ============================================================ */ :root[data-tema="gelap"] { --gulir-jempol: rgba(255, 255, 255, 0.26); --gulir-jempol-hover: rgba(255, 255, 255, 0.44); color-scheme: dark; /* ---------- Brand ---------- */ --color-primary: var(--biru-500); --color-primary-hover: var(--biru-400); --color-primary-active: var(--biru-300); --color-primary-soft: rgba(42, 107, 208, 0.22); --color-primary-softer: rgba(42, 107, 208, 0.13); --color-primary-border: rgba(134, 173, 235, 0.32); --color-primary-text: var(--biru-300); --color-on-primary: #FFFFFF; --color-secondary: var(--amber-400); --color-secondary-hover: var(--amber-300); --color-secondary-active: var(--amber-200); --color-secondary-soft: rgba(226, 147, 12, 0.20); --color-secondary-softer: rgba(226, 147, 12, 0.12); --color-secondary-border: rgba(255, 201, 79, 0.32); --color-secondary-text: var(--amber-300); --color-on-secondary: #1A1204; /* ---------- Permukaan dan latar ---------- */ --color-bg: #0A1220; --color-bg-subtle: #0D1729; --color-bg-muted: #152340; --color-bg-brand: #061225; --color-bg-brand-deep: #040D1B; --color-surface: #111E35; --color-surface-alt: #16243E; --color-surface-sunken: #0C1628; --color-overlay: rgba(2, 8, 20, 0.72); /* ---------- Garis ---------- */ --color-border: rgba(173, 200, 240, 0.16); --color-border-subtle: rgba(173, 200, 240, 0.10); --color-border-strong: rgba(173, 200, 240, 0.28); --color-border-control: rgba(173, 200, 240, 0.44); --color-border-focus: var(--biru-300); /* ---------- Teks ---------- *-inverse tetap terang: dipakai di atas latar brand yang juga gelap. */ --color-text: #E9EEF7; --color-text-secondary: #BCCAE0; --color-text-muted: #92A3BE; --color-text-subtle: #74869F; --color-text-inverse: #EAF0FA; --color-text-inverse-muted: #A9BEDD; --color-link: var(--biru-300); --color-link-hover: var(--biru-200); /* ---------- State ---------- */ --color-success: #2FB574; --color-success-soft: rgba(47, 181, 116, 0.16); --color-success-border: rgba(47, 181, 116, 0.34); --color-success-text: #7BDCB0; --color-warning: var(--amber-400); --color-warning-soft: rgba(248, 174, 26, 0.16); --color-warning-border: rgba(248, 174, 26, 0.34); --color-warning-text: #FFD27A; --color-danger: #F0655C; --color-danger-soft: rgba(240, 101, 92, 0.16); --color-danger-border: rgba(240, 101, 92, 0.34); --color-danger-text: #FFA9A3; --color-info: var(--biru-400); --color-info-soft: rgba(81, 137, 223, 0.16); --color-info-border: rgba(81, 137, 223, 0.34); --color-info-text: #A8C6F7; /* Lingkaran ikon kabar, toast, dan kartu (KP-157): transparan di atas latar lembut, bukan warna muda tema terang yang membuat ikon terang nyaris tak terlihat. Kontras ikon terhadap lingkarannya sekitar 5:1. */ --color-success-ikon: rgba(47, 181, 116, 0.28); --color-warning-ikon: rgba(248, 174, 26, 0.28); --color-danger-ikon: rgba(240, 101, 92, 0.28); --color-info-ikon: rgba(81, 137, 223, 0.28); /* State khas SCAFOLYA */ --color-tepat: var(--color-success); --color-tepat-soft: var(--color-success-soft); --color-tepat-border: var(--color-success-border); --color-tepat-text: var(--color-success-text); --color-belum-tepat: var(--color-warning); --color-belum-tepat-soft: var(--color-warning-soft); --color-belum-tepat-border: var(--color-warning-border); --color-belum-tepat-text: var(--color-warning-text); --color-belum-diperiksa: #8497B3; --color-belum-diperiksa-soft: rgba(173, 200, 240, 0.10); --color-belum-diperiksa-border: rgba(173, 200, 240, 0.24); --color-belum-diperiksa-text: #AEBDD4; --color-petunjuk: var(--amber-400); --color-petunjuk-soft: rgba(248, 174, 26, 0.14); --color-petunjuk-border: rgba(248, 174, 26, 0.32); --color-petunjuk-text: #FFD27A; /* Juga latar tombol Petunjuk yang ditunjuk, jadi lingkaran di dalamnya bertumpuk dua lapis; 0.22 menjaga ikonnya tetap di atas kontras 4,5 (KP-157). */ --color-petunjuk-ikon: rgba(248, 174, 26, 0.22); /* ---------- Tahap Polya: warna inti tetap, versi muda dan teks disesuaikan ---------- */ --tahap-1: var(--biru-400); --tahap-1-soft: rgba(81, 137, 223, 0.18); --tahap-1-text: #A8C6F7; --tahap-2: #A46BDC; --tahap-2-soft: rgba(164, 107, 220, 0.18); --tahap-2-text: #D3B4F2; --tahap-3: #17A093; --tahap-3-soft: rgba(23, 160, 147, 0.18); --tahap-3-text: #7FD8CF; --tahap-4: #D45C9B; --tahap-4-soft: rgba(212, 92, 155, 0.18); --tahap-4-text: #F2AACC; /* ---------- Disabled ---------- */ --color-disabled-bg: rgba(173, 200, 240, 0.08); --color-disabled-text: #7E8DA4; --color-disabled-border: rgba(173, 200, 240, 0.14); /* ---------- Kaca ---------- */ --glass-card: rgba(22, 36, 62, 0.74); --glass-card-hover: rgba(30, 48, 80, 0.86); --glass-panel: rgba(17, 30, 53, 0.64); --glass-chrome: rgba(9, 17, 31, 0.64); --glass-chrome-strong: rgba(9, 17, 31, 0.82); --glass-chrome-soft: rgba(17, 30, 53, 0.42); --glass-border: rgba(173, 200, 240, 0.18); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10); --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent); --glass-sheen-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); /* ---------- Bayangan: berbasis hitam, lebih dalam ---------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.50), 0 2px 6px -2px rgba(0, 0, 0, 0.34); --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.56), 0 4px 10px -4px rgba(0, 0, 0, 0.34); --shadow-xl: 0 28px 56px -16px rgba(0, 0, 0, 0.62), 0 8px 16px -8px rgba(0, 0, 0, 0.36); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-glass: 0 8px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.38); --shadow-glass-md: 0 16px 48px -12px rgba(0, 0, 0, 0.62), 0 4px 12px -6px rgba(0, 0, 0, 0.42); --shadow-glass-lg: 0 28px 72px -16px rgba(0, 0, 0, 0.68), 0 8px 24px -12px rgba(0, 0, 0, 0.45); --shadow-glass-xl: 0 40px 96px -24px rgba(0, 0, 0, 0.72); /* KP-177 (TS-7): bayang tepi halaman yang bergeser saat pindah halaman. Bayang navy tema terang hampir tak terlihat di latar gelap; padanannya mengikuti bayang lain yang setebal itu (0,18 menjadi 0,62). */ --bayang-geser-halaman: -24px 0 56px rgba(0, 0, 0, 0.62); /* ---------- Ambien dan partikel ---------- */ --ambient-biru: rgba(36, 86, 168, 0.30); --ambient-amber: rgba(168, 110, 18, 0.18); --ambient-toska: rgba(24, 104, 100, 0.22); --partikel-titik: rgba(186, 212, 248, 0.30); --partikel-garis: rgba(150, 190, 245, 0.10); /* ---------- Gradien ---------- */ --gradient-soft: linear-gradient(180deg, #16253F 0%, #0A1220 100%); --gradient-biru: linear-gradient(135deg, #0A377A 0%, #2A6BD0 100%); /* ---------- Beranda siswa (DEC-086) ---------- */ --sapa-latar: linear-gradient(128deg, #0A1A36 0%, #0E2A5C 50%, #184690 100%); --sapa-bayangan: 0 30px 70px -28px rgba(0, 0, 0, 0.75), 0 10px 24px -14px rgba(0, 0, 0, 0.5); --sampul-selubung: linear-gradient(180deg, rgba(4, 13, 27, 0.40) 0%, rgba(4, 13, 27, 0) 32%, rgba(4, 13, 27, 0) 60%, rgba(4, 13, 27, 0.50) 100%); --sampul-terkunci: rgba(4, 13, 27, 0.52); --status-kaca-latar: rgba(13, 23, 41, 0.86); --giliran-cahaya: rgba(248, 174, 26, 0.26); --gradient-selesai: linear-gradient(135deg, #1E8F58 0%, #2FB574 100%); /* ---------- Grafik Analitik situs (KP-138) ---------- */ --grafik-pengunjung: var(--biru-400); --grafik-kunjungan: #2BB3A3; --grafik-halaman: var(--amber-400); --grafik-umum: var(--biru-400); --grafik-siswa: #2BB3A3; --grafik-demo: #A87BDB; --grafik-staf: rgba(173, 200, 240, 0.42); --grafik-pratinjau: #E068A8; --grafik-robot: #74869F; --grafik-tanpa: rgba(173, 200, 240, 0.22); --grafik-k1: var(--biru-400); --grafik-k2: var(--amber-400); --grafik-k3: #2BB3A3; --grafik-k4: #A87BDB; --grafik-k5: #E068A8; --grafik-k6: var(--biru-200); --grafik-k7: rgba(173, 200, 240, 0.42); --grafik-kisi: rgba(173, 200, 240, 0.12); --grafik-sumbu: #92A3BE; --grafik-panas-0: rgba(173, 200, 240, 0.07); --grafik-panas: 81, 137, 223; --grafik-tip-latar: rgba(4, 13, 27, 0.96); --grafik-tip-teks: #EAF0FA; } /* Lembar jawaban adalah kertas putih, juga saat tema gelap: token warna di dalamnya dikembalikan ke nilai terang supaya tintanya tetap pekat dan terbaca. */ :root[data-tema="gelap"] .lembar { color-scheme: light; --color-text: var(--neutral-900); --color-text-secondary: var(--neutral-700); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); --color-surface: var(--neutral-0); --color-surface-alt: var(--neutral-50); --color-surface-sunken: var(--neutral-100); --color-bg-muted: var(--neutral-100); --color-border: var(--neutral-200); --color-border-subtle: var(--neutral-100); --color-border-strong: var(--neutral-300); --color-primary-text: var(--biru-700); --color-primary-soft: var(--biru-100); --color-primary-border: var(--biru-200); --color-secondary-text: var(--amber-700); --color-secondary-soft: var(--amber-100); --color-secondary-border: var(--amber-200); --color-success-text: var(--success-700); --color-success-soft: var(--success-50); --color-success-border: var(--success-200); --color-warning-text: var(--warning-700); --color-warning-soft: var(--warning-50); --color-warning-border: var(--warning-200); --color-danger-text: var(--danger-700); --color-danger-soft: var(--danger-50); --color-danger-border: var(--danger-200); --color-info-text: var(--biru-700); --color-info-soft: var(--biru-50); --color-info-border: var(--biru-200); --color-success-ikon: var(--success-100); --color-warning-ikon: var(--warning-100); --color-danger-ikon: var(--danger-100); --color-info-ikon: var(--biru-100); --color-petunjuk-ikon: var(--amber-100); --color-tepat-text: var(--success-700); --color-tepat-soft: var(--success-50); --color-tepat-border: var(--success-200); --color-belum-tepat-text: var(--warning-700); --color-belum-tepat-soft: var(--warning-50); --color-belum-tepat-border: var(--warning-200); --color-belum-diperiksa: var(--neutral-500); --color-belum-diperiksa-text: var(--neutral-600); --color-belum-diperiksa-soft: var(--neutral-100); --color-belum-diperiksa-border: var(--neutral-300); --color-petunjuk-text: var(--amber-700); --color-petunjuk-soft: var(--amber-50); --color-petunjuk-border: var(--amber-200); --tahap-1-text: var(--biru-700); --tahap-1-soft: var(--biru-50); --tahap-2-text: #6A32A0; --tahap-2-soft: #F1EAF9; --tahap-3-text: #0B6259; --tahap-3-soft: #E4F3F1; --tahap-4-text: #9A2A68; --tahap-4-soft: #FAE8F2; --glass-card: rgba(255, 255, 255, 0.92); --glass-panel: rgba(255, 255, 255, 0.88); --glass-border: var(--neutral-200); --glass-highlight: none; } /* Cetak selalu memakai token terang: berkas ini diimpor main.css khusus untuk media layar (AUD-35), jadi tidak ada token gelap yang ikut ke kertas. */