/* Tukanggaji — token desain.
   SATU-SATUNYA tempat nilai warna, radius, dan font boleh didefinisikan.
   Dilarang menulis nilai mentah (#hex, px radius) di CSS lain — STANDARDS §4.1.
   Butuh token baru? Lapor dulu, jangan tambah diam-diam. */

:root {
  /* Permukaan */
  --bg:        #FBFBFA;   /* kanvas halaman */
  --surface:   #FFFFFF;   /* kartu, tabel */
  --surface-2: #F7F6F3;   /* baris header, kbd, area tenang */
  --border:    #EAEAEA;   /* SEMUA garis: 1px solid var(--border) */

  /* Teks */
  --ink:    #111111;      /* teks utama — jangan pernah #000 */
  --muted:  #787774;      /* label, teks sekunder, nilai nol */

  /* Aksen pastel — hanya untuk makna, bukan hiasan */
  --merah-bg:  #FDEBEC;  --merah-ink:  #9F2F2D;   /* minus, bon, bahaya */
  --hijau-bg:  #EDF3EC;  --hijau-ink:  #346538;   /* final, lunas, cocok */
  --kuning-bg: #FBF3DB;  --kuning-ink: #956400;   /* peringatan, draft */
  --biru-bg:   #E1F3FE;  --biru-ink:   #1F6C9F;   /* info, sumber tarikan */

  /* Bentuk */
  --radius:    8px;
  --radius-kecil: 6px;    /* tombol, input */

  /* Huruf — tanpa Google Fonts: aplikasi harus jalan offline di MAMP */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-angka: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Ruang */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Gerak — halus, tidak menarik perhatian */
  --transisi: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}