/* ============================================================
   TOKENS TEMA NSC
   Satu-satunya sumber nilai warna untuk admin, siswa, ujian,
   auth, dan komponen. CSS landing menyalin gaya web asli dan
   dikecualikan (lihat docs/LAPORAN-REVISI.md).
   ============================================================ */

:root {
    color-scheme: light;

    /* Merek & aksen */
    --primary: #0b7f83;
    --primary-dark: #075d61;
    --primary-light: #e8f7f6;
    --primary-on-dark: #0b7f83;
    --link: var(--primary);
    --link-hover: var(--primary-dark);
    --tint: var(--primary-light);
    --accent: #f28a45;
    --accent-strong: #b84a12;
    --accent-hover: #e97a33;
    --accent-fg: #2a1407;
    --on-primary: #ffffff;
    --primary-hover: #075d61;
    --on-primary-hover: #ffffff;
    --image-bg: #ffffff;
    --logo-box: #ffffff;
    --control-bg: #eef4f5;
    --dark: #12343b;
    --mint: #bff0ea;
    --yellow: #ffd36b;
    --kuning: var(--yellow);

    /* Teks & permukaan */
    --text: #12343b;
    --ink: var(--text);
    --muted: #566f7b;
    --border: #dce7eb;
    --bg: #f4f8f9;
    --surface: #ffffff;
    --surface-2: #f8fbfb;
    --surface-3: #fbfdfd;
    --surface-hover: #fbfefe;
    --thead-bg: var(--primary-light);
    --row-hover: #fbfdfd;
    --overlay: rgba(18, 52, 59, 0.45);
    --shadow-color: rgba(18, 52, 59, 0.12);

    /* Status */
    --danger: #b42318;
    --danger-strong: #8f1a12;
    --danger-hover: #8f1a12;
    --danger-fill: #b42318;
    --danger-fill-hover: #8f1a12;
    --success: #15803d;
    --success-strong: #116b36;
    --success-dot: #1c9b5e;

    /* Sidebar & topbar */
    --sidebar-bg: #12343b;
    --sidebar-text: #cfe4ea;
    --sidebar-muted: #94a3b8;
    --sidebar-active-bg: rgba(255, 255, 255, 0.12);
    --sidebar-active-text: #ffffff;
    --sidebar-divider: rgba(191, 240, 234, 0.15);
    --sidebar-border: rgba(191, 240, 234, 0.15);
    --sidebar-footer-bg: rgba(7, 93, 97, 0.25);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-chip-bg: rgba(255, 255, 255, 0.12);
    --sidebar-chip-fg: #cfe4ea;

    /* Warna per grup sidebar admin (sidebar gelap di kedua tema) */
    --grup-dashboard: #8fe3e0;
    --grup-dashboard-bg: rgba(143, 227, 224, 0.16);
    --grup-akademik: #f28a45;
    --grup-akademik-bg: rgba(242, 138, 69, 0.18);
    --grup-library: #9ecbff;
    --grup-library-bg: rgba(158, 203, 255, 0.16);
    --grup-keuangan: #ffd36b;
    --grup-keuangan-bg: rgba(255, 211, 107, 0.16);
    --grup-situs: #d6c4ff;
    --grup-situs-bg: rgba(214, 196, 255, 0.16);
    --grup-pengaturan: #bff0ea;
    --grup-pengaturan-bg: rgba(191, 240, 234, 0.15);
    --topbar-bg: rgba(255, 255, 255, 0.94);

    /* Pola heksagon di belakang konten admin/siswa */
    --shell-pattern-opacity: 0.68;
    --shell-veil-top: rgba(244, 247, 249, 0.5);
    --shell-veil-bottom: rgba(244, 247, 249, 0.72);

    /* Badge */
    --badge-blue-bg: #e6f0ff;
    --badge-blue-fg: #1d4ed8;
    --badge-purple-bg: #f1ebff;
    --badge-purple-fg: #6d28d9;
    --badge-orange-bg: #fff1e6;
    --badge-orange-fg: #b84a12;
    --badge-pink-bg: #ffe8f0;
    --badge-pink-fg: #9d174d;
    --badge-green-bg: #e5f7ec;
    --badge-green-fg: #116b36;
    --badge-yellow-bg: #fff6dc;
    --badge-yellow-fg: #7a4b00;
    --badge-muted-bg: #eef2f4;
    --badge-muted-fg: #4b606b;
    --badge-danger-bg: #fef3f2;
    --badge-danger-fg: #b42318;

    /* Notice */
    --notice-info-bg: #f1f8ff;
    --notice-info-border: #cfe2f8;
    --notice-info-fg: #1e3a5f;
    --notice-success-bg: #f0faf4;
    --notice-success-border: #c9ead6;
    --notice-success-fg: #115c33;
    --notice-warning-bg: #fffaf0;
    --notice-warning-border: #f2e2bb;
    --notice-warning-fg: #6b4b06;
    --notice-danger-bg: #fef4f3;
    --notice-danger-border: #f4cfcb;
    --notice-danger-fg: #8a1c13;

    /* Form & kontrol */
    --input-bg: #ffffff;
    --input-placeholder: #94a9b3;
    --input-outline: rgba(11, 127, 131, 0.14);
    --input-error-outline: rgba(180, 35, 24, 0.12);
    --chip-bg: #eef2f4;
    --chip-fg: #4b606b;
    --segmented-active-fg: #ffffff;

    /* Status editor / ujian */
    --status-perlu-bg: #fff6dc;
    --status-perlu-border: #f4e2a8;
    --status-perlu-fg: #7a4b00;
    --status-draft-bg: #e6f0ff;
    --status-draft-border: #b9ccf7;
    --status-draft-fg: #1d4ed8;
    --status-draft-border-strong: #d6b04a;
    --benar-bg: #e5f7ec;
    --benar-border: #b7e4c8;
    --benar-border-soft: #7fc9a3;
    --benar-fg: #116b36;
    --salah-bg: #fef3f2;
    --salah-border: #f5c2bd;
    --salah-border-soft: #e6a19a;
    --salah-bg-soft: #fef6f5;
    --kunci-chip-bg: #d9f2e4;
    --salah-chip-bg: #fde3e0;

    /* Garis & elemen khusus */
    --chart-grid: #e3ecee;
    --chart-area: rgba(11, 127, 131, 0.1);
    --outline-hover-border: #b9cfd5;
    --quick-hover-border: #b9d7d9;
    --opsi-hover-border: #9fd9d4;
    --palet-kosong-border: #9db1b8;
    --draft-bg: #12343b;
    --draft-text: #eaf4f5;
    --draft-strong: #ffffff;
    --draft-outline-border: rgba(255, 255, 255, 0.3);
    --panel-dark-bg: #12343b;
    --ujian-bg: #eef2f5;
    --panel-dark-text: #eaf4f5;
    --panel-dark-muted: #b9d1d5;
    --panel-dark-muted-2: #9fb9bf;
    --hero-tint: #e8f7f6;
    --success-soft: #f2fbf6;
    --success-soft-border: #7fc9a3;
    --ujian-header-text: #f2fafb;
    --ujian-meta-text: #bcd3d8;
    --ujian-save-dot: #7bd3b0;
    --ujian-timer-text: #ffffff;
    --ujian-timer-kritis: #ffd9c2;
    --ujian-nomor-ragu-fg: #3b1b06;
    --kalkulator-aksi-bg: #f7fafb;
    --kalkulator-layar-bg: #12343b;
    --kalkulator-layar-text: #ffffff;
    --kalkulator-layar-muted: #a9c4ca;
    --note-icon-bg: #fff1e6;
    --note-icon-border: #ffd9c2;

    /* Halaman auth */
    --auth-bg: #f5f8fa;
    --auth-pattern-opacity: 0.68;
    --auth-veil-top: rgba(244, 247, 249, 0.5);
    --auth-veil-bottom: rgba(244, 247, 249, 0.72);
    --auth-card-bg: #ffffff;
    --auth-input-bg: #ffffff;
    --auth-ink: #12343b;
    --auth-line: #12343b;
    --auth-shadow: #12343b;
    --auth-link: #0b7f83;
    --auth-link-hover: #075d61;
    --auth-btn-hover: #075d61;

    /* Kontrol tema di atas latar gelap (navbar landing, header ujian) */
    --tema-kontras-bg: rgba(255, 255, 255, 0.1);
    --tema-kontras-bg-hover: rgba(255, 255, 255, 0.18);
    --tema-kontras-border: rgba(255, 255, 255, 0.4);
    --tema-kontras-border-hover: rgba(255, 255, 255, 0.65);
    --tema-kontras-fg: #ffffff;
    --tema-kontras-muted: rgba(255, 255, 255, 0.72);

    /* Bayangan, radius, tipografi */
    --bayang: 0 1px 2px rgba(18, 52, 59, 0.04);
    --bayang-naik: 0 10px 30px rgba(18, 52, 59, 0.12);
    --radius: 12px;
    --radius-sm: 10px;
    --radius-xs: 8px;

    --font-teks: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-judul: "Archivo", "Plus Jakarta Sans", "Segoe UI", sans-serif;

    --sidebar: 252px;
    --topbar: 56px;
    --konten: 1180px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --primary: #0b7f83;
    --primary-dark: #5fd3d6;
    --primary-light: rgba(95, 211, 214, 0.12);
    --primary-on-dark: #5fd3d6;
    --link: var(--primary-on-dark);
    --link-hover: var(--accent);
    --tint: rgba(95, 211, 214, 0.14);
    --accent: #f28a45;
    --accent-strong: #ffb07a;
    --accent-hover: #ff9a58;
    --accent-fg: #2a1407;
    --on-primary: #ffffff;
    --primary-hover: #5fd3d6;
    --on-primary-hover: #0b1a1e;
    --image-bg: #ffffff;
    --logo-box: #ffffff;
    --control-bg: #163239;
    --dark: #0b1a1e;
    --mint: #1f4f55;
    --yellow: #ffd36b;
    --kuning: var(--yellow);

    --text: #e6f2f3;
    --ink: var(--text);
    --muted: #8fb0b8;
    --border: #1f3d45;
    --bg: #0b1a1e;
    --surface: #112a30;
    --surface-2: #163239;
    --surface-3: #163239;
    --surface-hover: #163239;
    --thead-bg: var(--primary-light);
    --row-hover: rgba(95, 211, 214, 0.06);
    --overlay: rgba(3, 12, 15, 0.72);
    --shadow-color: rgba(0, 0, 0, 0.45);

    --danger: #ff8a80;
    --danger-strong: #ffb4ab;
    --danger-hover: #e05a50;
    --danger-fill: #b3261e;
    --danger-fill-hover: #93160f;
    --success: #6fdc9c;
    --success-strong: #8fe5b2;
    --success-dot: #3fbf7b;

    --sidebar-bg: #081a1e;
    --sidebar-text: #cfe4ea;
    --sidebar-muted: #8fb0b8;
    --sidebar-active-bg: rgba(95, 211, 214, 0.14);
    --sidebar-active-text: #ffffff;
    --sidebar-divider: #1f3d45;
    --sidebar-border: #1f3d45;
    --sidebar-footer-bg: rgba(95, 211, 214, 0.06);
    --sidebar-hover-bg: rgba(95, 211, 214, 0.08);
    --sidebar-chip-bg: rgba(255, 255, 255, 0.08);
    --sidebar-chip-fg: #cfe4ea;

    /* Warna per grup sidebar admin, sedikit lebih terang di tema gelap */
    --grup-dashboard: #a6efec;
    --grup-dashboard-bg: rgba(143, 227, 224, 0.2);
    --grup-akademik: #ffa46b;
    --grup-akademik-bg: rgba(242, 138, 69, 0.22);
    --grup-library: #b3d6ff;
    --grup-library-bg: rgba(158, 203, 255, 0.2);
    --grup-keuangan: #ffe09a;
    --grup-keuangan-bg: rgba(255, 211, 107, 0.2);
    --grup-situs: #e2d6ff;
    --grup-situs-bg: rgba(214, 196, 255, 0.2);
    --grup-pengaturan: #cdf5f0;
    --grup-pengaturan-bg: rgba(191, 240, 234, 0.19);
    --topbar-bg: rgba(17, 42, 48, 0.9);

    --shell-pattern-opacity: 0.22;
    --shell-veil-top: rgba(11, 26, 30, 0.6);
    --shell-veil-bottom: rgba(11, 26, 30, 0.82);

    --badge-blue-bg: rgba(96, 165, 250, 0.16);
    --badge-blue-fg: #9cc7ff;
    --badge-purple-bg: rgba(167, 139, 250, 0.16);
    --badge-purple-fg: #c9b6ff;
    --badge-orange-bg: rgba(242, 138, 69, 0.18);
    --badge-orange-fg: #ffb98c;
    --badge-pink-bg: rgba(244, 114, 182, 0.16);
    --badge-pink-fg: #ffadd3;
    --badge-green-bg: rgba(111, 220, 156, 0.16);
    --badge-green-fg: #9aebbb;
    --badge-yellow-bg: rgba(255, 211, 107, 0.16);
    --badge-yellow-fg: #ffe09a;
    --badge-muted-bg: rgba(143, 176, 184, 0.14);
    --badge-muted-fg: #b7ccd2;
    --badge-danger-bg: rgba(255, 138, 128, 0.16);
    --badge-danger-fg: #ffb4ab;

    --notice-info-bg: rgba(96, 165, 250, 0.12);
    --notice-info-border: rgba(96, 165, 250, 0.35);
    --notice-info-fg: #bcd8ff;
    --notice-success-bg: rgba(111, 220, 156, 0.12);
    --notice-success-border: rgba(111, 220, 156, 0.35);
    --notice-success-fg: #a9f0c6;
    --notice-warning-bg: rgba(255, 211, 107, 0.12);
    --notice-warning-border: rgba(255, 211, 107, 0.34);
    --notice-warning-fg: #ffe4a8;
    --notice-danger-bg: rgba(255, 138, 128, 0.12);
    --notice-danger-border: rgba(255, 138, 128, 0.35);
    --notice-danger-fg: #ffc0b9;

    --input-bg: #0d2227;
    --input-placeholder: #7f9aa2;
    --input-outline: rgba(95, 211, 214, 0.22);
    --input-error-outline: rgba(255, 138, 128, 0.24);
    --chip-bg: rgba(143, 176, 184, 0.14);
    --chip-fg: #b7ccd2;
    --segmented-active-fg: #ffffff;

    --status-perlu-bg: rgba(255, 211, 107, 0.14);
    --status-perlu-border: rgba(255, 211, 107, 0.4);
    --status-perlu-fg: #ffe09a;
    --status-draft-bg: rgba(96, 165, 250, 0.14);
    --status-draft-border: rgba(96, 165, 250, 0.4);
    --status-draft-fg: #9cc7ff;
    --status-draft-border-strong: rgba(255, 211, 107, 0.45);
    --benar-bg: rgba(111, 220, 156, 0.14);
    --benar-border: rgba(111, 220, 156, 0.4);
    --benar-border-soft: rgba(111, 220, 156, 0.5);
    --benar-fg: #9aebbb;
    --salah-bg: rgba(255, 138, 128, 0.14);
    --salah-border: rgba(255, 138, 128, 0.4);
    --salah-border-soft: rgba(255, 138, 128, 0.5);
    --salah-bg-soft: rgba(255, 138, 128, 0.09);
    --kunci-chip-bg: rgba(111, 220, 156, 0.2);
    --salah-chip-bg: rgba(255, 138, 128, 0.2);

    --chart-grid: #1f3d45;
    --chart-area: rgba(95, 211, 214, 0.14);
    --outline-hover-border: #2d545e;
    --quick-hover-border: #2d545e;
    --opsi-hover-border: #2d545e;
    --palet-kosong-border: #527078;
    --draft-bg: #081a1e;
    --draft-text: #e6f2f3;
    --draft-strong: #ffffff;
    --draft-outline-border: rgba(230, 242, 243, 0.3);
    --panel-dark-bg: #081a1e;
    --ujian-bg: #0b1a1e;
    --panel-dark-text: #e6f2f3;
    --panel-dark-muted: #a8c4ca;
    --panel-dark-muted-2: #8fb0b8;
    --hero-tint: rgba(95, 211, 214, 0.12);
    --success-soft: rgba(111, 220, 156, 0.1);
    --success-soft-border: rgba(111, 220, 156, 0.45);
    --ujian-header-text: #e6f2f3;
    --ujian-meta-text: #a8c4ca;
    --ujian-save-dot: #6fdc9c;
    --ujian-timer-text: #ffffff;
    --ujian-timer-kritis: #ffd9c2;
    --ujian-nomor-ragu-fg: #2a1407;
    --kalkulator-aksi-bg: #163239;
    --kalkulator-layar-bg: #081a1e;
    --kalkulator-layar-text: #e6f2f3;
    --kalkulator-layar-muted: #a8c4ca;
    --note-icon-bg: rgba(242, 138, 69, 0.18);
    --note-icon-border: rgba(242, 138, 69, 0.4);

    --auth-bg: #0b1a1e;
    --auth-pattern-opacity: 0.22;
    --auth-veil-top: rgba(11, 26, 30, 0.6);
    --auth-veil-bottom: rgba(11, 26, 30, 0.82);
    --auth-card-bg: #112a30;
    --auth-input-bg: #0d2227;
    --auth-ink: #e6f2f3;
    --auth-line: #3a646d;
    --auth-shadow: #061114;
    --auth-link: #5fd3d6;
    --auth-link-hover: #8fe5ea;
    --auth-btn-hover: #0a6a6e;

    --bayang: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bayang-naik: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Transisi halus saat tema berganti; hanya properti warna. */
body {
    transition: background-color 0.15s ease, color 0.15s ease;
}

html.tema-beralih *,
html.tema-beralih *::before,
html.tema-beralih *::after {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        fill 0.15s ease, stroke 0.15s ease, box-shadow 0.15s ease !important;
}