/* ============================================================
   Token desain Web Code Battle.
   Semua warna, jarak, radius, dan durasi didefinisikan DI SINI SAJA.
   File lain hanya boleh memakai var(--...), tidak menulis hex sendiri.
   ============================================================ */

:root {
  /* ---- Permukaan ---- */
  --tinta-900: #0d1220;  /* latar terluar */
  --tinta-800: #111828;  /* latar panel */
  --tinta-700: #1b2440;  /* kartu, ubin papan */
  --tinta-600: #27345c;  /* garis pemisah, ubin nonaktif */

  /* ---- Teks ---- */
  --teks-utama:  #eef2ff;
  --teks-redup:  #97a3c4;

  /* ---- Aksen: tiap warna punya satu tugas tetap ---- */
  --amber:  #ffc043;   /* skor, dadu, taruhan, kode room */
  --amber-gelap: #b8811d;
  --mint:   #3ddc97;   /* jawaban benar, tangga */
  --mint-gelap:  #1f8f5e;
  --koral:  #ff5d5d;   /* jawaban salah, ular */
  --koral-gelap: #b32f2f;
  --lavender: #9b8cff; /* kotak misteri */

  /* ---- Warna kelompok (mode monopoli) ----
     Delapan warna yang tetap terbaca berdampingan di papan maupun di
     daftar kelompok. Urutannya mengikuti urutan giliran. */
  --pemain-1: #ffc043;
  --pemain-2: #3ddc97;
  --pemain-3: #ff5d5d;
  --pemain-4: #9b8cff;
  --pemain-5: #4fc3f7;
  --pemain-6: #ff8fc7;
  --pemain-7: #b6e26a;
  --pemain-8: #ff9f6e;

  /* ---- Warna kelompok properti di papan monopoli ---- */
  --grup-html:  #ff9f6e;
  --grup-css:   #6ec8ff;
  --grup-js:    #ffc043;
  --grup-akhir: #b48cff;
  /* Kelompok warna untuk preset papan TP 2 (semuanya materi HTML). */
  --grup-teks:     #ff9f6e;
  --grup-media:    #6ec8ff;
  --grup-struktur: #ffc043;
  --grup-data:     #b48cff;

  /* ---- Bayangan padat: memberi kesan bidak fisik, bukan blur lembut ---- */
  --angkat-1: 0 3px 0 rgba(0, 0, 0, 0.45);
  --angkat-2: 0 6px 0 rgba(0, 0, 0, 0.45);
  --angkat-3: 0 10px 0 rgba(0, 0, 0, 0.5);

  /* ---- Radius ---- */
  --r-kecil: 8px;
  --r-sedang: 14px;
  --r-besar: 22px;
  --r-bulat: 999px;

  /* ---- Jarak (skala 4px) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* ---- Huruf ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-teks:    "Inter", system-ui, sans-serif;
  --font-kode:    "JetBrains Mono", ui-monospace, monospace;

  /* ---- Gerak ---- */
  --cepat:  120ms;
  --sedang: 260ms;
  --lambat: 520ms;
  --pantul: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hormati pengguna yang mematikan animasi di sistemnya. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}