/* ==========================================================================
   tokens.css — Design tokens Portal Ujian USM SMK Bina Informatika
   --------------------------------------------------------------------------
   HANYA berisi variabel. Satu-satunya file yang boleh menulis hex warna.
   Palet & font sama dengan PSB Online (psbonline-v2/DESAIN.md).
   Acuan: DESAIN.md §2–§4, §10.  Tema: TERANG SAJA (tidak ada dark mode).

   Bagian 2 berisi ALIAS nama variabel lama dari tema CBT (--brand, --n-*,
   --gold, --font-mono, …). CSS komponen yang dibawa dari CBT (ujian.css,
   admin.css, print.css) masih memakai nama itu; lewat alias ini semuanya
   otomatis ikut palet USM. CSS baru memakai token di bagian 1 & 3.
   ========================================================================== */

:root {

  /* Cegah "auto dark mode" browser/Windows membalik warna halaman ujian. */
  color-scheme: light;

  /* ======================================================================
     1. Token dasar (DESAIN.md §2.1–§2.3)
     ====================================================================== */

  /* Hijau hutan — bidang gelap & warna aksi */
  --hutan-950: #04221F;   /* footer, overlay banner, teks di atas mint      */
  --hutan-900: #062F2A;   /* hero login, sidebar operator, chip timer       */
  --hutan-800: #0C3F38;   /* kartu/item di atas latar gelap                 */
  --hutan-700: #13564C;   /* garis & hover di latar gelap; hover tombol     */
  --hutan-600: #1B6E60;   /* WARNA AKSI: tombol, tautan, fokus, terjawab    */

  /* Mint — aksen di latar gelap & sorotan lembut di latar terang */
  --mint-300: #B6F3DC;    /* headline/aksen di latar gelap                  */
  --mint-100: #E3FBF1;    /* latar sorotan, ring fokus input                */

  /* Netral hangat */
  --kertas: #F7F5EF;      /* latar halaman                                  */
  --putih:  #FFFFFF;      /* kartu, form                                    */
  --pasir:  #ECE7DB;      /* permukaan sekunder, hover                      */
  --garis:  #D9D4C7;      /* border di latar terang                         */
  --garis-kuat: #808E8A;  /* batas kolom isian: 3,4:1 di putih (WCAG 1.4.11) */
  --tinta:  #10201D;      /* teks utama                                     */
  --abu:    #5A6B67;      /* teks sekunder (5,6:1 di atas kertas)           */
  --kabut:  #9CC4B8;      /* teks sekunder di latar gelap; placeholder      */

  /* Status */
  --sukses:          #167B56;
  --sukses-tint:     #E2F5EC;
  --peringatan:      #916400;
  --peringatan-tint: #FBF1D9;
  --bahaya:          #B83A3A;
  --bahaya-tint:     #FBE6E4;
  --info:            #2461A8;
  --info-tint:       #E3EEFA;

  /* Khusus USM: latar chip ragu-ragu (teks selalu --tinta, kontras > 10:1) */
  --ragu: #F2C14E;

  /* Overlay gelap (modal, banner) — hutan-950 dengan transparansi */
  --overlay:      rgb(4 34 31 / .6);
  --overlay-teks: rgb(4 34 31 / .8);
  --putih-90:     rgb(255 255 255 / .9);
  --putih-55:     rgb(255 255 255 / .55);

  /* Cetak (print.css): hitam-putih supaya hemat tinta & terbaca di fotokopi */
  --cetak-tinta:  #000000;
  --cetak-kertas: #FFFFFF;
  --cetak-abu:    #333333;   /* subjudul */
  --cetak-garis:  #666666;   /* garis sel tabel */
  --cetak-latar:  #EEEEEE;   /* latar kepala tabel */

  /* ======================================================================
     2. Alias nama lama tema CBT → palet USM
     ====================================================================== */

  --n-900: var(--tinta);
  --n-700: var(--tinta);
  --n-500: var(--abu);
  --n-400: var(--abu);      /* dipakai untuk border hover & ikon; abu agar tetap ≥ 3:1 */
  --n-300: var(--garis);
  --n-200: var(--garis);
  --n-100: var(--pasir);
  --n-050: var(--kertas);
  --n-000: var(--putih);

  --brand:        var(--hutan-600);
  --brand-strong: var(--hutan-700);
  --brand-soft:   var(--mint-100);

  /* Di CBT "merah identitas"; di USM identitas = hijau hutan tergelap. */
  --brand-red:      var(--hutan-900);
  --brand-red-soft: var(--mint-100);

  --gold:      var(--ragu);
  --gold-soft: var(--peringatan-tint);

  --ok:          var(--sukses);
  --ok-soft:     var(--sukses-tint);
  --warn:        var(--ragu);
  --warn-soft:   var(--peringatan-tint);
  --danger:      var(--bahaya);
  --danger-soft: var(--bahaya-tint);
  --info-soft:   var(--info-tint);

  /* ======================================================================
     3. Peran (yang dipakai CSS komponen)
     ====================================================================== */

  --bg:             var(--kertas);
  --surface:        var(--putih);
  --surface-raised: var(--pasir);
  --border:         var(--garis);
  --border-strong:  var(--garis);
  --border-input:   var(--garis-kuat);   /* input, select, kolom cari yang bisa diisi */
  --text:           var(--tinta);
  --text-muted:     var(--abu);
  --text-subtle:    var(--abu);
  --aksi:           var(--hutan-600);
  --aksi-hover:     var(--hutan-700);
  --focus-ring:     var(--hutan-600);
  --on-color:       var(--putih);   /* teks di atas bidang warna pekat */

  /* ---------- Tipografi (DESAIN.md §3) ---------------------------------- */
  --font-sans: "Plus Jakarta Sans Variable", ui-sans-serif, system-ui,
               "Segoe UI", Roboto, sans-serif;
  /* Tidak ada font monospace di USM: angka memakai tabular-nums. */
  --font-mono: var(--font-sans);

  --fs-display: clamp(36px, 5vw, 56px);
  --fs-h1:      clamp(26px, 3vw, 32px);
  --fs-h2:      clamp(20px, 2vw, 24px);
  --fs-lead:    clamp(17px, 1.6vw, 18px);
  --fs-eyebrow: 12px;
  --fs-xs:      13px;
  --fs-sm:      13px;
  --fs-small:   13px;
  --fs-base:    15px;
  --fs-body:    15px;
  --fs-soal:    17px;
  --fs-lg:      20px;
  --fs-xl:      28px;
  --fs-timer:   clamp(16px, 1.6vw, 20px);   /* teks timer panjang: "Sisa Waktu : 30 menit" */

  --lh-tight: 1.2;
  --lh-base:  1.6;
  --lh-soal:  1.7;

  --ls-eyebrow: .12em;

  /* ---------- Ruang (DESAIN.md §4) -------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---------- Radius ---------------------------------------------------- */
  --r-sm:   8px;    /* input, chip soal, tombol kecil */
  --r-md:   12px;   /* tombol, opsi jawaban           */
  --r-lg:   20px;   /* kartu, box, modal              */
  --r-xl:   28px;   /* banner, panel hero             */
  --r-pill: 999px;  /* badge                          */

  /* ---------- Bayangan: hanya untuk elemen melayang ------------------- */
  --shadow-float: 0 12px 32px -12px rgb(4 34 31 / .25);
  --shadow-md:    var(--shadow-float);
  --shadow-sm:    0 1px 2px rgb(4 34 31 / .08);

  /* ---------- Layout ---------------------------------------------------- */
  --w-content: 1200px;
  --w-soal:    860px;
  --h-control: 40px;    /* operator; area peserta memakai --h-peserta */
  --h-peserta: 44px;    /* target sentuh minimal di area peserta      */
  --h-header:  64px;

  /* ---------- Gerak (DESAIN.md §7) -------------------------------------- */
  --ease-halus: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .15s ease-out;
  --t-base: .25s var(--ease-halus);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-base: 0s;
  }
}