/* CM001 kit — button.css (@layer cm.components). Adds the variants/sizes/states the legacy .btn
 * lacks (secondary/warn/info/link/lg/block/icon/loading + controlgroup). Token-driven. */
@layer cm.components {
  .btn--secondary { background: var(--surface); border-color: var(--line-2, #cbd5e1); color: var(--text); }
  .btn--warn { background: var(--warn); border-color: var(--warn); color: var(--on-warn, #1f2937); }
  .btn--info { background: var(--info, #0ea5e9); border-color: var(--info, #0ea5e9); color: var(--on-info, #fff); }
  .btn--link { background: transparent; border-color: transparent; color: var(--brand); padding-inline: 4px; }
  .btn--link:hover { text-decoration: underline; background: transparent; }
  .btn--lg { padding: 11px 18px; font-size: 14.5px; min-height: var(--control-h-lg, 46px); }
  .btn--block { width: 100%; justify-content: center; }
  .btn--icon { padding: 8px; aspect-ratio: 1; justify-content: center; }
  .btn--icon.btn--sm { padding: 6px; }

  .btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
  .btn.is-loading .btn-lbl, .btn.is-loading > .ic { visibility: hidden; }
  .btn-spin {
    width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
    animation: cm-spin .6s linear infinite;
  }
  .btn.is-loading .btn-spin { position: absolute; inset: 0; margin: auto; color: var(--on-brand, #fff); }
  .btn--secondary.is-loading .btn-spin, .btn--ghost.is-loading .btn-spin { color: var(--text); }

  /* controlgroup — a row of joined buttons */
  .btn-group { display: inline-flex; }
  .btn-group > .btn { border-radius: 0; margin-inline-start: -1px; }
  .btn-group > .btn:first-child { border-start-start-radius: var(--radius-md, 10px); border-end-start-radius: var(--radius-md, 10px); margin-inline-start: 0; }
  .btn-group > .btn:last-child { border-start-end-radius: var(--radius-md, 10px); border-end-end-radius: var(--radius-md, 10px); }
  .btn-group > .btn.on, .btn-group > .btn[aria-pressed="true"] { background: var(--brand-50, #eff6ff); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); z-index: 1; }
}