/* tokens-murid.css — CSS variables tema Duolingo, hanya di-load oleh layouts/murid.php. Mode gelap ditambahkan lewat blok [data-theme="dark"] di bawah -- murid juga bisa memakai aplikasi malam hari, jadi ini tetap dipisah dari tokens-admin.css (bahasa visual gamified murid tetap sendiri, sesuai catatan di tokens-admin.css) tapi mekanismenya sama: atribut [data-theme="dark"] di , diset oleh murid.js + anti-flash script di layout. */ :root { --murid-primary: #58CC02; --murid-primary-dark: #58A700; --murid-secondary: #1CB0F6; /* Biru sekunder yang lebih tua -- dipakai untuk border-bottom tombol .btn-secondary (efek "tekan" 3D) dan untuk teks di atas latar putih (--murid-secondary kontrasnya kurang utk teks kecil). Sebelumnya nilai ini di-hardcode terpisah di beberapa tempat (murid.css, bab-path.css) dengan angka yang TIDAK selalu sama (#0d8ecf vs #1899d6) -- disatukan di sini supaya cuma ada 1 sumber kebenaran. */ --murid-secondary-dark: #0D8ECF; --murid-warning: #FFC800; --murid-danger: #FF4B4B; --murid-bg: #FFFFFF; --murid-bg-soft: #F7F7F7; --murid-text: #3C3C3C; /* Teks sekunder/caption -- diperkenalkan saat audit UI/UX untuk menggantikan warna abu-abu inline (#777/#999/#AFAFAF/#555) yang tersebar di banyak view dan kontrasnya di bawah/pas-pasan WCAG AA (4.5:1) di atas latar putih. #6D7175 dipilih sama seperti --admin-text-secondary supaya konsisten lintas tema, dan kontrasnya terhadap putih ~5.2:1 (lulus AA untuk teks normal). */ --murid-text-muted: #6D7175; --murid-border-radius: 16px; --murid-border-width: 2px; /* Tinggi tombol besar -- SATU sumber dipakai bareng oleh .btn-murid (murid.css) & .btn-soal (tombol "Periksa" di layar soal), supaya keduanya selalu sama persis, bukan kebetulan sama karena ditulis angka yang sama di 2 tempat. */ --murid-btn-height: 52px; /* Noto Naskh Arabic sebagai fallback: huruf Arab tidak ada di Nunito, jadi otomatis dirender dengan font Naskh */ --murid-font: 'Nunito', 'Noto Naskh Arabic', 'Baloo 2', sans-serif; /* Skala tipografi -- diperkenalkan saat audit UI/UX untuk menggantikan font-size inline (style="font-size:...px") yang tersebar di seluruh view murid. Sebelumnya elemen yang secara fungsi sama dipakai dengan ukuran berbeda-beda (mis. teks caption/text-muted campur 12/13/14px, judul kartu dalam daftar campur 14-17px, judul halaman campur 19/20/22px) -- di bawah ini setiap peran punya satu ukuran tetap, sama seperti pola --text-* di tokens-admin.css. */ --murid-text-xs: 0.8125rem; /* 13px — caption/meta/text-muted kecil */ --murid-text-sm: 0.9375rem; /* 15px — judul item dalam kartu/daftar (mapel, kuis, misi) */ --murid-text-base: 1rem; /* 16px — sub-heading section & label baris (Level, Achievement) */ --murid-text-md: 1.125rem; /* 18px — skor akhir kuis */ --murid-text-lg: 1.25rem; /* 20px — judul halaman (h1) & heading besar */ --murid-text-xl: 1.5rem; /* 24px — angka statistik besar pada kartu ringkasan */ --murid-text-icon-md: 1.75rem; /* 28px — ikon dekoratif ukuran sedang dalam kartu */ --murid-text-icon-lg: 2rem; /* 32px — ikon/lambang besar (mis. header leaderboard) */ /* Border/divider & shadow -- sebelumnya hex mentah (#E5E5E5/#F0F0F0 dst.) tersebar langsung di murid.css, jadi tidak bisa ikut berubah saat mode gelap aktif. Ditarik jadi token di sini supaya satu tempat ini saja yang perlu override per tema. */ --murid-border: #E5E5E5; --murid-border-soft: #F0F0F0; --murid-ring-soft: #EFEFEF; --murid-shadow-sm: rgba(0,0,0,0.06); --murid-shadow-md: rgba(0,0,0,.18); /* Latar lembut beraksen -- status jawaban benar/salah, opsi terpilih, input aktif. */ --murid-success-soft: #EFFBE6; --murid-danger-soft: #FFECEC; --murid-info-soft: #E7F7FF; --murid-input-bg: #F7FBFF; /* Pemetaan ke komponen fakeselect.css (dropdown pengganti saat ini, tapi dipetakan sekalian supaya konsisten & otomatis siap kalau suatu saat ditambahkan. */ --fs-surface: var(--murid-bg); --fs-border: #E1E3E5; --fs-text: var(--murid-text); --fs-muted: #6D7175; --fs-hover: var(--murid-bg-soft); --fs-radius: var(--murid-border-radius); } /* ── Mode gelap sisi murid — status dipasang via atribut [data-theme="dark"] di , diset paling awal oleh inline script anti-flash di layouts/murid.php (sama pola dengan sisi admin di tokens-admin.css), lalu diganti lewat tombol toggle mengambang di pojok kanan atas (.murid-theme-toggle, muridSetTheme() di murid.js). Warna primer/sekunder/ warning/danger sengaja TIDAK diubah -- sudah cukup vibrant & tetap kontras di atas surface gelap. ── */ [data-theme="dark"] { color-scheme: dark; --murid-bg: #1E1F24; --murid-bg-soft: #15161A; --murid-text: #F0F0F2; --murid-text-muted: #A3A4AB; --murid-border: #34353C; --murid-border-soft: #292A30; --murid-ring-soft: #34353C; --murid-shadow-sm: rgba(0,0,0,0.4); --murid-shadow-md: rgba(0,0,0,.5); --murid-success-soft: rgba(88,204,2,0.18); --murid-danger-soft: rgba(255,75,75,0.2); --murid-info-soft: rgba(28,176,246,0.18); --murid-input-bg: rgba(28,176,246,0.1); --fs-border: var(--murid-border); }