/* =====================================================================
   TOKEN DESAIN — satu-satunya tempat warna, jarak, dan radius didefinisikan.

   Dua lapis:
   1. Palet mentah (--marun-500, --n-200 …) — hanya dipakai DI BERKAS INI.
   2. Semantik (--aksen, --permukaan, --teks-2 …) — yang boleh dipakai
      komponen dan menu.

   Karena komponen hanya mengenal lapis semantik, mode gelap cukup
   mendefinisikan ulang lapis itu. Mengganti warna merek pun cukup di sini:
   dulu palet yang sama disalin di 7 berkas.
   ===================================================================== */
:root {
  /* ---------- palet mentah: merek ---------- */
  --marun-50:  #FBF1F0;
  --marun-100: #F4DCDA;
  --marun-400: #C44D47;
  --marun-500: #9E3B36;
  --marun-600: #86302C;
  --marun-700: #6E2724;
  --krem-50:   #FDFAF5;
  --krem-100:  #FAF4EA;
  --krem-200:  #F3E3D0;

  /* ---------- palet mentah: netral hangat ---------- */
  --n-0:   #FFFFFF;
  --n-50:  #FBF8F3;
  --n-100: #F4EEE6;
  --n-200: #ECE7E2;
  --n-300: #D6C9BB;
  --n-400: #B5AAA2;
  --n-500: #8A7F78;
  --n-600: #5E5550;
  --n-800: #2A2320;
  --n-900: #1A1614;

  /* ---------- lapis semantik ---------- */
  /* latar putih bersih; abu hangat tipis hanya untuk hover & isian */
  --bg:            var(--n-0);
  --permukaan:     var(--n-0);
  --permukaan-2:   #F7F5F3;
  --permukaan-3:   #F0EDEA;
  --teks:          var(--n-900);
  --teks-2:        var(--n-500);
  --teks-3:        var(--n-400);
  --garis:         var(--n-200);
  --garis-kuat:    var(--n-300);
  --aksen:         var(--marun-500);
  --aksen-hover:   var(--marun-600);
  --aksen-lembut:  var(--marun-50);
  --aksen-teks:    #FFFFFF;
  /* isian marun seperti tombol utama — dipakai menu aktif & pemilih modul */
  --aksen-isi:     linear-gradient(135deg, var(--marun-400) 0%, var(--marun-500) 55%, var(--marun-600) 100%);
  --aksen-isi-hover: linear-gradient(135deg, var(--marun-500) 0%, var(--marun-600) 55%, var(--marun-700) 100%);
  --bayang-aksen:  0 6px 16px -6px color-mix(in srgb, var(--marun-500) 60%, transparent);

  --ok:            #3B6D11;  --ok-bg:       #EEF6E6;
  --waspada:       #8A5A1A;  --waspada-bg:  #F6EEDE;
  --bahaya:        #A32D2D;  --bahaya-bg:   #FBEAE9;
  --info:          #2C5A8C;  --info-bg:     #E8EEF6;

  --cincin-fokus:  0 0 0 3px color-mix(in srgb, var(--aksen) 32%, transparent);
  --bayang-1:      0 1px 2px rgba(60, 40, 30, .06), 0 1px 3px rgba(60, 40, 30, .05);
  --bayang-2:      0 10px 32px rgba(60, 40, 30, .12);
  --lapis-gelap:   rgba(26, 22, 20, .45);

  /* ---------- ukuran ---------- */
  --r-sm: 8px;   --r: 12px;   --r-lg: 16px;   --r-bulat: 999px;
  --s-1: 4px;    --s-2: 8px;  --s-3: 12px;    --s-4: 16px;
  --s-5: 24px;   --s-6: 32px; --s-7: 48px;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-kecil: 12px;  --t: 14px;  --t-sedang: 16px;  --t-besar: 20px;  --t-judul: 26px;

  --lebar-sisi: 264px;
  --tinggi-atas: 64px;
  --tinggi-bawah: 64px;

  color-scheme: light;
}

/* ---------- mode gelap: hanya lapis semantik yang berubah ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --bg: #14110F;           --permukaan: #1D1916;      --permukaan-2: #26201C;
    --permukaan-3: #2B2521;  --teks: #F3ECE4;           --teks-2: #A89C93;
    --teks-3: #7A6F68;       --garis: #362E29;          --garis-kuat: #4A3F39;
    --aksen: #D8645D;        --aksen-hover: #E57C75;    --aksen-lembut: #3A211F;
    --ok: #8DC45A;           --ok-bg: #1F2A15;
    --waspada: #E0A857;      --waspada-bg: #2E2414;
    --bahaya: #EE7B72;       --bahaya-bg: #33191A;
    --info: #7FA9DA;         --info-bg: #17222F;
    --bayang-1: 0 1px 2px rgba(0, 0, 0, .4);
    --bayang-2: 0 10px 32px rgba(0, 0, 0, .5);
    --lapis-gelap: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-tema="gelap"] {
  --bg: #14110F;           --permukaan: #1D1916;      --permukaan-2: #26201C;
  --permukaan-3: #2B2521;  --teks: #F3ECE4;           --teks-2: #A89C93;
  --teks-3: #7A6F68;       --garis: #362E29;          --garis-kuat: #4A3F39;
  --aksen: #D8645D;        --aksen-hover: #E57C75;    --aksen-lembut: #3A211F;
  --ok: #8DC45A;           --ok-bg: #1F2A15;
  --waspada: #E0A857;      --waspada-bg: #2E2414;
  --bahaya: #EE7B72;       --bahaya-bg: #33191A;
  --info: #7FA9DA;         --info-bg: #17222F;
  --bayang-1: 0 1px 2px rgba(0, 0, 0, .4);
  --bayang-2: 0 10px 32px rgba(0, 0, 0, .5);
  --lapis-gelap: rgba(0, 0, 0, .6);
  color-scheme: dark;
}