/* ══════════════════════════════════════════════════════════════════
   KDS Button — atom. Reused by Header, Order card, … (never rebuilt).
   Base anatomy from the global Button; restyled with KDS tokens + Mazzard.
   Colours use the light-scale tokens (host page resolves :root = light).
   ══════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;
     min-width:96px;border:0;cursor:pointer;text-decoration:none;
     font-family:'Mazzard H',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     transition:filter .15s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{filter:brightness(.94)}
.btn .ic{flex:none;display:grid;place-items:center}
.btn .ic svg{display:block}

/* ── sizes (height · padding · radius · type) ── */
.btn--34{height:34px;padding:10px 12px;border-radius:6px;font-size:12px;line-height:14px;font-weight:700}
.btn--40{height:40px;padding:0 16px;border-radius:6px;font-size:14px;line-height:18px;font-weight:700}
.btn--32{height:32px;min-width:0;width:56px;padding:0;border-radius:6px;font-size:12px;line-height:14px;font-weight:700}
.btn--34 .ic{width:20px;height:20px}

/* ── variants → KDS tokens ── */
.btn--grad   {background:linear-gradient(71.859deg, #4C9AFF -1.46%, #0052CC 128.08%); color:var(--white-500)} /* primary */
.btn--slate  {background:var(--text-300);  color:var(--white-500)}  /* #3C4F65 */
.btn--success{background:var(--green-500); color:var(--white-500)}  /* #2CB16D */
.btn--danger {background:var(--red-500);   color:var(--white-500)}  /* #FF4747 */