/* ===============================
   Buttons & Controls
   =============================== */

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:var(--radius-md);
  font-family:var(--font-ui);
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, transform .05s ease;
}
.btn--primary{background:var(--accent-500); color:var(--on-accent);}
.btn--primary:hover{background:var(--accent-700);}
.btn--primary:active{transform:translateY(1px);}

.btn--outline{
  background:transparent; color:var(--accent-700); border-color:var(--accent-300);
}
.btn--outline:hover{
  background:color-mix(in oklch, var(--accent-100), white 20%);
  border-color:var(--accent-700);
}

/* Icon button (small circular) */
.icon-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
  font-size:18px; line-height:1;
}
.icon-btn:hover{border-color:var(--accent-300); background:var(--accent-100);}

/* Toggle switch (simple) */
.switch{
  --h:24px; --w:44px;
  position:relative; display:inline-block; width:var(--w); height:var(--h);
  background:#ddd; border-radius:999px; vertical-align:middle; cursor:pointer;
  transition:background .2s ease;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:calc(var(--h) - 4px); height:calc(var(--h) - 4px);
  background:#fff; border-radius:50%; transition:left .2s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.switch[aria-checked="true"]{background:var(--accent-500);}
.switch[aria-checked="true"]::after{left:calc(var(--w) - var(--h) + 2px);}