/* ==========================================================================
   tokens.css — Design tokens CBT SMK Bina Informatika
   --------------------------------------------------------------------------
   HANYA berisi variabel. Jangan menulis selector komponen di file ini.
   Acuan: DESAIN.md §2, §3, §4.  Tema: TERANG SAJA (tidak ada dark mode).
   ========================================================================== */

:root {

  /* ---------- Tema ------------------------------------------------------
     Aplikasi ini TERANG SAJA (DESAIN.md §2.0). Deklarasi color-scheme
     mencegah browser/Windows yang disetel mode gelap membalik warna
     halaman sendiri ("auto dark mode") — tanpa baris ini, tampilan ujian
     bisa berbeda-beda antar komputer lab.
     -------------------------------------------------------------------- */
  color-scheme: light;

  /* ---------- Netral ---------------------------------------------------- */
  --n-900: #0F172A;   /* teks utama                    */
  --n-700: #334155;   /* teks kuat / heading sekunder   */
  --n-500: #64748B;   /* teks sekunder / label          */
  --n-400: #94A3B8;   /* placeholder & ikon dekoratif SAJA — kontrasnya
                         2.4:1, jangan dipakai untuk teks yang harus dibaca */
  --n-300: #CBD5E1;   /* border input                   */
  --n-200: #E2E8F0;   /* garis pemisah, border kartu    */
  --n-100: #F1F5F9;   /* permukaan naik / hover         */
  --n-050: #F7F9FC;   /* latar halaman                  */
  --n-000: #FFFFFF;   /* permukaan kartu                */

  /* ---------- Brand (diambil dari public/logosmkbi.png) ------------------ */

  /* Biru navy emblem — WARNA AKSI: tombol primer, tautan, fokus */
  --brand:        #003B86;
  --brand-strong: #00285C;
  --brand-soft:   rgba(0, 59, 134, .10);

  /* Merah perisai — IDENTITAS, bukan tombol aksi (lihat DESAIN.md §2.2) */
  --brand-red:      #DA251C;
  --brand-red-soft: rgba(218, 37, 28, .10);

  /* Emas pita (#FFFF00 diturunkan supaya tidak menyilaukan) */
  --gold:      #F2B705;
  --gold-soft: rgba(242, 183, 5, .14);

  /* ---------- Semantik -------------------------------------------------- */
  --ok:          #0B7D51;   /* digelapkan di Fase 5: versi lama #0E8F5E hanya
                               4.11:1 dengan teks putih, di bawah ambang AA */
  --ok-soft:     rgba(14, 143, 94, .12);
  --warn:        var(--gold);
  --warn-soft:   var(--gold-soft);
  --danger:      #C81E16;
  --danger-soft: rgba(200, 30, 22, .10);
  --info:        #0B63CE;
  --info-soft:   rgba(11, 99, 206, .10);

  /* ---------- Peran (dipakai di CSS komponen, bukan token mentah) -------- */
  --bg:             var(--n-050);
  --surface:        var(--n-000);
  --surface-raised: var(--n-100);
  --border:         var(--n-200);
  --border-strong:  var(--n-300);
  --text:           var(--n-900);
  --text-muted:     var(--n-500);
  --text-subtle:    var(--n-400);
  --focus-ring:     var(--brand);
  --on-color:       var(--n-000);   /* teks di atas bidang warna pekat
                                       (tombol navy, danger, label) */

  /* ---------- Tipografi ------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  --fs-eyebrow: 12px;   /* mono uppercase            */
  --fs-xs:      12px;
  --fs-sm:      13px;
  --fs-base:    15px;   /* body                      */
  --fs-soal:    17px;   /* teks soal — wajib > body  */
  --fs-lg:      20px;   /* judul kartu               */
  --fs-xl:      28px;   /* H1 halaman                */

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

  --ls-eyebrow: .08em;

  /* ---------- Spacing --------------------------------------------------- */
  --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 nomor soal   */
  --r-md:   14px;   /* tombol, kartu kecil      */
  --r-lg:   20px;   /* kartu, panel, modal      */
  --r-pill: 999px;  /* badge, nav pill          */

  /* ---------- Bayangan (dipakai hemat — lihat DESAIN.md §4) -------------- */
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, .06), 0 1px 3px rgba(2, 6, 23, .08);
  --shadow-md: 0 8px 24px rgba(2, 6, 23, .10);

  /* ---------- Layout ---------------------------------------------------- */
  --w-content: 1200px;  /* lebar maksimum halaman       */
  --w-soal:    860px;   /* kolom teks soal              */
  --h-control: 40px;    /* tinggi input & tombol        */
  --h-header:  64px;

  /* ---------- Gerak ----------------------------------------------------- */
  --t-fast: .15s ease;
  --t-base: .2s ease;
}

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