:root {
  /* Ramp aksen biru (cuplikan 50-900) */
  --biru-50: rgb(239, 246, 255);
  --biru-100: rgb(219, 234, 254);
  --biru-300: rgb(147, 197, 253);
  --biru-600: rgb(37, 99, 235);
  --biru-700: rgb(29, 78, 216);
  --biru-900: rgb(30, 58, 138);

  /* Ramp netral abu */
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-700: rgb(51, 65, 85);
  --abu-900: rgb(15, 23, 42);

  /* Alias peran — membaca ramp, bukan nilai mentah */
  --aksi: var(--biru-600);
  --aksi-hover: var(--biru-700);
  --teks: var(--abu-900);
  --teks-samping: var(--abu-700);
  --garis: var(--abu-200);
  --latar: var(--abu-50);

  /* Derivasi color-mix() untuk tint */
  --lencana-latar: color-mix(in srgb, var(--biru-600) 25%, rgb(255, 255, 255));
  --lencana-garis: color-mix(in srgb, var(--biru-600) 50%, rgb(255, 255, 255));
}

.swatch {
  width: 72px;
  height: 48px;
  border: 1px solid var(--abu-200);
  border-radius: 6px;
}

.swatch-biru-600 { background-color: var(--biru-600); }
.swatch-biru-50 { background-color: var(--biru-50); }

.lencana {
  display: inline-block;
  background-color: var(--lencana-latar);
  border: 1px solid var(--lencana-garis);
  color: var(--biru-700);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}

.garis-aksen {
  height: 4px;
  border: 0;
  background-color: var(--lencana-garis);
  border-radius: 2px;
}