/*!
 * Prime Competition — design token.
 *
 * Palet diambil dari UI Prime Generation Education System agar kedua
 * produk terasa satu keluarga. --brand-600 dan --ink-900 adalah hasil
 * sampling piksel dari halaman login yang sudah berjalan.
 *
 * Dua aturan warna yang tidak boleh dilanggar:
 *
 *   1. --brand-600 TIDAK BOLEH jadi warna teks di atas --ink-900.
 *      Rasio kontrasnya 2,71 dan gagal WCAG AA. Di permukaan gelap,
 *      teks dan ikon merah memakai --brand-300 (rasio 6,72).
 *
 *   2. Merah adalah warna brand sekaligus warna bahaya, jadi pesan galat
 *      tidak boleh mengandalkan warna saja. Setiap galat wajib membawa
 *      ikon dan teks penjelas.
 */

:root {
	/* --- Merah — hsl(352, 72%, L) --------------------------------------- */
	--brand-50:  #FFF0F2;
	--brand-100: #FED7DD;
	--brand-200: #FBB1BB;
	--brand-300: #F47C8C;   /* teks/ikon merah di atas latar gelap */
	--brand-400: #E74057;
	--brand-500: #D61F37;
	--brand-600: #B81E33;   /* PRIMARY */
	--brand-700: #A0182A;   /* hover / pressed / ujung gradasi */
	--brand-800: #821221;
	--brand-900: #640C18;

	/* --- Netral — abu murni, netral dingin ------------------------------ */
	--ink-950: #121212;
	--ink-900: #1A1A1A;     /* latar gelap halaman */
	--ink-850: #212121;     /* permukaan kartu di mode gelap */
	--ink-800: #2B2B2B;     /* chip / tombol sekunder gelap */
	--ink-700: #383838;     /* border di mode gelap */
	--ink-600: #4C4C4C;     /* teks sekunder di mode terang */
	--ink-500: #666666;
	--ink-400: #8C8C8C;     /* placeholder, disabled */
	--ink-300: #B2B2B2;     /* teks sekunder di mode gelap */
	--ink-200: #D6D6D6;     /* border di mode terang */
	--ink-100: #EDEDED;
	--ink-50:  #F7F7F7;     /* latar halaman mode terang */
	--surface: #FFFFFF;

	/* --- Gradasi khas Prime -------------------------------------------- */
	--brand-gradient: linear-gradient(135deg, #C42540 0%, #9D182B 100%);

	/* --- Status --------------------------------------------------------- */
	--ok:     #15803D;
	--warn:   #B45309;
	--danger: #B81E33;
	--info:   #1D4ED8;

	/* Versi lembut untuk latar kotak pesan di permukaan terang. */
	--ok-soft:     #EAF6EE;
	--warn-soft:   #FDF3E4;
	--danger-soft: #FFF0F2;
	--info-soft:   #EAF0FD;

	/* --- Peran warna pada permukaan TERANG ------------------------------
	   Ini nilai bawaan. Blok .on-dark di bawah menukarnya, bukan
	   mendefinisikan ulang tokennya. */
	--bg:            var(--ink-50);
	--bg-card:       var(--surface);
	--bg-sunken:     var(--ink-100);
	--text:          var(--ink-900);
	--text-muted:    var(--ink-600);
	--text-faint:    var(--ink-400);
	--border:        var(--ink-200);
	--border-strong: var(--ink-300);
	--accent:        var(--brand-600);   /* aman sebagai teks di latar terang */
	--accent-hover:  var(--brand-700);
	--on-accent:     #FFFFFF;

	/* --- Tipografi ------------------------------------------------------ */
	--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
	             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--text-display: 700 2.25rem/1.1 var(--font-sans);   /* 36px — timer, skor */
	--text-h1:      700 1.5rem/1.25 var(--font-sans);   /* 24px — judul halaman */
	--text-h2:      600 1.25rem/1.3 var(--font-sans);   /* 20px */
	--text-h3:      600 1.125rem/1.35 var(--font-sans); /* 18px — judul kartu */
	--text-question: 400 1.0625rem/1.65 var(--font-sans); /* 17px — isi soal */
	--text-body:    500 0.9375rem/1.55 var(--font-sans); /* 15px — teks antarmuka */
	--text-label:   500 0.8125rem/1.4 var(--font-sans);  /* 13px — label kecil */

	/* --- Ruang ---------------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;

	/* --- Sudut ---------------------------------------------------------- */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;    /* kartu, diwarisi dari Prime Generation */
	--r-xl: 20px;
	--r-pill: 999px;

	/* --- Bayangan ------------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.06);
	--shadow-md: 0 4px 12px rgba(18, 18, 18, 0.08);
	--shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.14);

	/* --- Target sentuh --------------------------------------------------
	   44px adalah batas bawah yang wajib untuk semua kontrol; opsi jawaban
	   dibuat lebih tinggi lagi karena seluruh kartunya bisa diketuk. */
	--tap: 44px;
	--tap-option: 56px;

	/* --- Gerak ---------------------------------------------------------- */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast: 120ms;
	--dur: 200ms;
}

/*
 * Permukaan gelap. Dipakai di login, hero landing, header, sidebar admin,
 * dan tiket. TIDAK dipakai untuk isi soal — teks panjang di layar HP dalam
 * ruang ujian yang terang lebih mudah dibaca di atas latar terang.
 */
.on-dark {
	--bg:            var(--ink-900);
	--bg-card:       var(--ink-850);
	--bg-sunken:     var(--ink-950);
	--text:          #FFFFFF;
	--text-muted:    var(--ink-300);
	--text-faint:    var(--ink-400);
	--border:        var(--ink-700);
	--border-strong: var(--ink-600);
	--accent:        var(--brand-300);   /* bukan brand-600: kontras 2,71 gagal AA */
	--accent-hover:  var(--brand-200);
	--on-accent:     #FFFFFF;

	--ok-soft:     rgba(21, 128, 61, 0.16);
	--warn-soft:   rgba(180, 83, 9, 0.18);
	--danger-soft: rgba(184, 30, 51, 0.20);
	--info-soft:   rgba(29, 78, 216, 0.18);

	color: var(--text);
	background: var(--bg);
}

/* Warna status di permukaan gelap butuh nada yang lebih terang. */
.on-dark {
	--ok:     #4ADE80;
	--warn:   #FBBF24;
	--danger: var(--brand-300);
	--info:   #93B4FD;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
	}
}