:root {
  /* Tokens — primitive dan alias */
  --biru-600: rgb(29, 78, 216);
  --biru-100: rgb(219, 234, 254);
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-800: rgb(30, 41, 59);

  --aksi: var(--biru-600);
  --aksi-latar-lembut: var(--biru-100);
  --permukaan: rgb(255, 255, 255);
  --garis: var(--abu-200);
  --teks: var(--abu-800);

  --spasi-1: 4px;
  --spasi-2: 8px;
  --spasi-4: 16px;
  --teks-dasar: 16px;
  --teks-kecil: 12px;
  --radius: 12px;
}

/* Komponen inti: kartu, tombol, lencana — membaca token saja */
.kartu {
  background-color: var(--permukaan);
  color: var(--teks);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: var(--spasi-4);
  font-size: var(--teks-dasar);
}

.tombol {
  background-color: var(--aksi);
  color: rgb(255, 255, 255);
  border: 0;
  border-radius: 8px;
  padding: var(--spasi-2) var(--spasi-4);
  font-size: var(--teks-dasar);
}

.tombol--sekunder {
  --aksi: var(--aksi-latar-lembut);
  --aksi-teks: var(--biru-600);
  color: var(--aksi-teks, rgb(255, 255, 255));
}

.lencana {
  background-color: var(--aksi-latar-lembut);
  color: var(--biru-600);
  border-radius: 999px;
  padding: var(--spasi-1) var(--spasi-2);
  font-size: var(--teks-kecil);
}