:root {
  color-scheme: light dark;

  --latar-halaman: rgb(248, 250, 252);
  --latar-kartu: rgb(255, 255, 255);
  --teks: rgb(15, 23, 42);
  --teks-samping: rgb(71, 85, 105);
  --garis: rgb(226, 232, 240);
  --aksen: rgb(29, 78, 216);
}

@media (prefers-color-scheme: dark) {
  :root {
    --latar-halaman: rgb(2, 6, 23);
    --latar-kartu: rgb(15, 23, 42);
    --teks: rgb(226, 232, 240);
    --teks-samping: rgb(148, 163, 184);
    --garis: rgb(30, 41, 59);
    --aksen: rgb(147, 197, 253);
  }
}

body {
  background-color: var(--latar-halaman);
  color: var(--teks);
}

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

.aksen { color: var(--aksen); }

.status {
  color: light-dark(rgb(22, 163, 74), rgb(74, 222, 128));
}