Custom checkbox

/* HTML: <label><input type="checkbox" class="checkbox" /> Label</label> */

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid oklch(0.45 0.02 260);
  border-radius: 0.25rem;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.checkbox:checked {
  background: oklch(0.52 0.22 265);
  border-color: oklch(0.52 0.22 265);
}

.checkbox:checked::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.1rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox:focus-visible {
  outline: 2px solid oklch(0.72 0.19 265);
  outline-offset: 2px;
}

.checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

You are a senior frontend engineer building custom form controls.

Goal: A styled checkbox with custom check mark using appearance: none — no JavaScript.

Technical constraints:
- Use appearance: none to strip native styling.
- Check mark: ::after pseudo-element with rotated border trick.
- Checked state: background fills with accent color, check mark appears.
- Use oklch() for all colors, not hex or rgba().
- Focus-visible: 2px outline with 2px offset for keyboard navigation.
- Disabled state: reduced opacity, not-allowed cursor.

Framework variant (pick one):
A) Vanilla HTML + CSS only, using native <input type="checkbox">.
B) React component — accept checked, onChange, disabled, label props.

Edge cases to handle:
- Must remain accessible — use real <input> not div, wrapped in <label>.
- Indeterminate state styling if needed (optional).
- Right-to-left layout should not break check mark positioning.

Return HTML + CSS.