/* ============================================================
   COMPONENT · TOGGLE
   Rocker switch. Two states with mechanical engage feel.
   Use on <button role="switch" aria-checked="..."> for a11y.
   ============================================================ */

.c-toggle {
  --tgl-on: var(--color-accent);
  position: relative;
  display: inline-block;
  width: 3.5rem;
  height: 1.75rem;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-bezel-dark);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset-deep);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snap);
}

.c-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.75rem - 6px);
  height: calc(1.75rem - 6px);
  border-radius: var(--radius-circle);
  background: linear-gradient(180deg, var(--c-bezel-hi) 0%, var(--c-bezel-light) 50%, var(--c-bezel) 100%);
  box-shadow:
    0 1px 0 var(--c-bezel-hi),
    0 2px 4px rgba(0,0,0,0.6);
  transition: transform var(--dur-fast) var(--ease-snap);
}

.c-toggle[aria-checked="true"],
.c-toggle.is-on {
  background: color-mix(in srgb, var(--tgl-on) 25%, var(--color-surface-sunken));
  box-shadow:
    var(--shadow-inset-deep),
    inset 0 0 8px color-mix(in srgb, var(--tgl-on) 50%, transparent);
}

.c-toggle[aria-checked="true"]::before,
.c-toggle.is-on::before {
  transform: translateX(1.75rem);
  background: linear-gradient(180deg, var(--tgl-on) 0%, color-mix(in srgb, var(--tgl-on) 70%, black) 100%);
  box-shadow: 0 0 8px var(--tgl-on);
}

.c-toggle--danger { --tgl-on: var(--color-danger); }
.c-toggle--ok     { --tgl-on: var(--color-ok); }
.c-toggle--primary { --tgl-on: var(--color-primary); }