/* ───────────────── Accent checkbox/radio via CSS variable ───────────────── */
/* usage:
   parent or input:
   --control-accent: 59 130 246;   // RGB without rgb()
*/

.ui-check-accent,
.ui-radio-accent{
  --control-accent: 59 130 246; /* fallback blue */
}

/* base accent border/background */
input[type="checkbox"].ui-check-accent,
input[type="radio"].ui-radio-accent{
  border-color: rgba(var(--control-accent), .72);
  background: rgba(var(--control-accent), .12);
}

/* dark base */
.dark input[type="checkbox"].ui-check-accent,
.dark input[type="radio"].ui-radio-accent{
  border-color: rgba(var(--control-accent), .55);
  background: rgba(var(--control-accent), .18);
}

/* checked */
input[type="checkbox"].ui-check-accent:checked,
input[type="radio"].ui-radio-accent:checked{
  border-color: rgba(var(--control-accent), .98);
  background: rgba(var(--control-accent), .22);
}

/* checked dark */
.dark input[type="checkbox"].ui-check-accent:checked,
.dark input[type="radio"].ui-radio-accent:checked{
  border-color: rgba(var(--control-accent), .95);
  background: rgba(var(--control-accent), .28);
}

/* focus ring */
input[type="checkbox"].ui-check-accent:focus-visible,
input[type="radio"].ui-radio-accent:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--control-accent), .24);
}

.dark input[type="checkbox"].ui-check-accent:focus-visible,
.dark input[type="radio"].ui-radio-accent:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--control-accent), .22);
}


input[type="checkbox"]{
  position: relative;
}

input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  color: rgba(59,130,246,.95);
}

input[type="checkbox"].ui-check-accent:checked::after{
  color: rgba(var(--control-accent), .98);
}


input[type="radio"]{
  position: relative;
}

input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9999px;
  background: currentColor;
  color: rgba(59,130,246,.95);
}

input[type="radio"].ui-radio-accent:checked::after{
  color: rgba(var(--control-accent), .98);
}