:root,
:root[data-theme="blue"]{
  --bg:#EFF2FF;
  --paper:#FFFFFF;
  --ink:#1b1d2a;
  --ink2:#362E7D;
  --muted:#69708d;
  --faint:#DBDEF4;
  --hair:rgba(54,46,125,.16);
  --hair2:rgba(54,46,125,.08);
  --accent:#5863C7;
  --accent-rgb:88,99,199;
  --accent-soft:#DBDEF4;
  --brand-dark:#362E7D;
  --brand-light:#91A9FF;
}

:root[data-theme="teal"]{
  --bg:#EFF3F4;
  --paper:#FFFFFF;
  --ink:#172123;
  --ink2:#2A2F31;
  --muted:#657476;
  --faint:#DBDFDC;
  --hair:rgba(42,47,49,.16);
  --hair2:rgba(42,47,49,.08);
  --accent:#48606B;
  --accent-rgb:72,96,107;
  --accent-soft:#DBDFDC;
  --brand-dark:#2A2F31;
  --brand-light:#88A8B5;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}

.theme-switch{
  position:relative;
  display:inline-flex;
  width:46px;
  height:26px;
  flex-shrink:0;
}

.theme-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.theme-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--brand-light);
  border:0.5px solid var(--hair);
  cursor:pointer;
  transition:background .15s;
}

.theme-slider::before{
  content:'';
  position:absolute;
  width:20px;
  height:20px;
  left:3px;
  top:2.5px;
  border-radius:50%;
  background:var(--paper);
  box-shadow:0 1px 4px rgba(0,0,0,.16);
  transition:transform .15s;
}

.theme-switch input:checked + .theme-slider{
  background:var(--accent);
}

.theme-switch input:checked + .theme-slider::before{
  transform:translateX(19px);
}