:root {
  --latar: rgb(255, 255, 255);
  --teks: rgb(15, 23, 42);
  --aksen: rgb(29, 78, 216);
  --garis: rgb(226, 232, 240);
}

[data-tema="terang"] {
  --latar: rgb(255, 255, 255);
  --teks: rgb(15, 23, 42);
  --aksen: rgb(29, 78, 216);
  --garis: rgb(226, 232, 240);
}

[data-tema="gelap"] {
  --latar: rgb(2, 6, 23);
  --teks: rgb(226, 232, 240);
  --aksen: rgb(147, 197, 253);
  --garis: rgb(30, 41, 59);
}

body,
.kartu {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

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

.aksen { color: var(--aksen); font-weight: 600; }