:root {
  /* Tier 1 — primitive: bahan mentah, tidak dipakai langsung komponen */
  --putih: rgb(255, 255, 255);
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-800: rgb(30, 41, 59);
  --biru-600: rgb(29, 78, 216);

  /* Tier 2 — alias: memberi peran pada primitive */
  --permukaan: var(--abu-50);
  --garis: var(--abu-200);
  --teks: var(--abu-800);
  --aksi-primer: var(--biru-600);
  --aksi-primer-teks: var(--putih);
}

/* Tier 3 — komponen: konsumsi lewat variabel lokalnya sendiri */
.tombol {
  --tombol-latar: var(--aksi-primer);
  --tombol-teks: var(--aksi-primer-teks);

  background-color: var(--tombol-latar);
  color: var(--tombol-teks);
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
}

.kartu {
  --kartu-latar: var(--permukaan);
  --kartu-garis: var(--garis);
  --kartu-teks: var(--teks);

  background-color: var(--kartu-latar);
  border: 1px solid var(--kartu-garis);
  border-radius: 12px;
  color: var(--kartu-teks);
  padding: 16px;
}