/* 11 · Button · product · rounded corners · unit 4 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--dsm-buttons-stroke, 1px) solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn[data-size="s"] {
  height: var(--dsm-buttons-s-height, 32px); /* 8 × 4 */
  padding-inline: var(--dsm-buttons-s-inset, 12px); /* 3 × 4 */
  gap: var(--dsm-buttons-s-gap, 8px); /* 2 × 4 */
  border-radius: var(--dsm-buttons-s-radius, 8px); /* 2 × 4 */
  font: var(--dsm-type-h5-weight, 600) var(--dsm-type-h5-size, 12px)/var(--dsm-type-h5-line, 20px) var(--dsm-font-sans, sans-serif); /* 02 · h5 */
}
.btn[data-size="s"] .btn__icon { width: 16px; height: 16px; /* 04 · 16 */ }
.btn[data-size="m"] {
  height: var(--dsm-buttons-m-height, 40px); /* 10 × 4 */
  padding-inline: var(--dsm-buttons-m-inset, 16px); /* 4 × 4 */
  gap: var(--dsm-buttons-m-gap, 8px); /* 2 × 4 */
  border-radius: var(--dsm-buttons-m-radius, 8px); /* 2 × 4 */
  font: var(--dsm-type-label-weight, 500) var(--dsm-type-label-size, 12px)/var(--dsm-type-label-line, 20px) var(--dsm-font-sans, sans-serif); /* 02 · label */
}
.btn[data-size="m"] .btn__icon { width: 16px; height: 16px; /* 04 · 16 */ }
.btn[data-size="l"] {
  height: var(--dsm-buttons-l-height, 48px); /* 12 × 4 */
  padding-inline: var(--dsm-buttons-l-inset, 20px); /* 5 × 4 */
  gap: var(--dsm-buttons-l-gap, 8px); /* 2 × 4 */
  border-radius: var(--dsm-buttons-l-radius, 8px); /* 2 × 4 */
  font: var(--dsm-type-h4-weight, 600) var(--dsm-type-h4-size, 14px)/var(--dsm-type-h4-line, 20px) var(--dsm-font-sans, sans-serif); /* 02 · h4 */
}
.btn[data-size="l"] .btn__icon { width: 20px; height: 20px; /* 04 · 20 */ }
.btn__icon { flex: 0 0 auto; }
.btn[data-variant="primary"] { background: var(--dsm-primary, #194CFF); /* 03 · primary */
  color: var(--dsm-onAccent, #F7F7F7); /* 03 · onAccent */ }
.btn[data-variant="secondary"] { background: transparent;
  color: var(--dsm-textHeading, #EEEEEE); /* 03 · textHeading */
  border-color: var(--dsm-controlBorder, #4C4C4C); /* 03 · controlBorder */ }
.btn[data-variant="ghost"] { background: transparent;
  color: var(--dsm-textBody, #EEEEEE); /* 03 · textBody */ }
.btn[data-variant="destructive"] { background: var(--dsm-error, #FFAAA2); /* 03 · error */
  color: var(--dsm-onAccent, #F7F7F7); /* 03 · onAccent */ }
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.94); }
.btn:focus-visible { outline: none; box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--dsm-disabledBg, #1C1C1C); /* 03 · disabledBg */
  color: var(--dsm-disabledFg, #777777); /* 03 · disabledFg */
  border-color: transparent; cursor: not-allowed; filter: none; }
.btn[data-loading="true"] { pointer-events: none; }
.btn[data-loading="true"] .btn__spinner { width: 1em; height: 1em; border: var(--dsm-buttons-stroke, 2px) solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }