/* ─── Button ──────────────────────────────────────────────────────────────────
   Values: site/tokens.css (--ds-btn-* tokens)
   Consumers: site/preview/buttons.html + src/components/Button/Button.tsx
   States: data-attributes only (data-variant / data-intent / data-size)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Base ───────────────────────────────────────────────────────────────────── */

.ds-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid transparent;
  border-radius:   var(--ds-btn-md-r);
  cursor:          pointer;
  font-family:     inherit;
  font-weight:     500;
  letter-spacing:  0.01em;
  white-space:     nowrap;
  outline:         none;
  text-decoration: none;
  transition:
    background      var(--ds-dur-2) var(--ds-ease),
    border-color    var(--ds-dur-2) var(--ds-ease),
    color           var(--ds-dur-2) var(--ds-ease),
    box-shadow      var(--ds-dur-2) var(--ds-ease),
    transform       var(--ds-dur-1) var(--ds-ease);
}

.ds-btn:active:not([data-disabled]):not(:disabled):not([aria-disabled='true']) {
  transform: scale(var(--ds-scale-press));
}

.ds-btn[data-focus-visible],
.ds-btn:focus-visible {
  box-shadow: var(--ds-focus-ring);
}

.ds-btn[data-disabled],
.ds-btn:disabled,
.ds-btn[aria-disabled='true'] {
  cursor:         not-allowed;
  pointer-events: none;
}

/* Fill width modifier */
.ds-btn[data-width='fill'] {
  width: 100%;
}

/* ── Size modifiers ─────────────────────────────────────────────────────────── */

.ds-btn[data-size='sm'] {
  --ds-btn-icon-size: var(--ds-btn-sm-icon);
  height:        var(--ds-btn-sm-h);
  padding:       0 var(--ds-btn-sm-px);
  gap:           var(--ds-btn-sm-gap);
  font-size:     var(--ds-btn-sm-fs);
  line-height:   var(--ds-btn-sm-lh);
  border-radius: var(--ds-btn-sm-r);
}

.ds-btn[data-size='md'],
.ds-btn:not([data-size]) {
  --ds-btn-icon-size: var(--ds-btn-md-icon);
  height:        var(--ds-btn-md-h);
  padding:       0 var(--ds-btn-md-px);
  gap:           var(--ds-btn-md-gap);
  font-size:     var(--ds-btn-md-fs);
  line-height:   var(--ds-btn-md-lh);
  border-radius: var(--ds-btn-md-r);
}

.ds-btn[data-size='lg'] {
  --ds-btn-icon-size: var(--ds-btn-lg-icon);
  height:        var(--ds-btn-lg-h);
  padding:       0 var(--ds-btn-lg-px);
  gap:           var(--ds-btn-lg-gap);
  font-size:     var(--ds-btn-lg-fs);
  line-height:   var(--ds-btn-lg-lh);
  border-radius: var(--ds-btn-lg-r);
}

.ds-btn[data-size='xl'] {
  --ds-btn-icon-size: var(--ds-btn-xl-icon);
  height:        var(--ds-btn-xl-h);
  padding:       0 var(--ds-btn-xl-px);
  gap:           var(--ds-btn-xl-gap);
  font-size:     var(--ds-btn-xl-fs);
  line-height:   var(--ds-btn-xl-lh);
  border-radius: var(--ds-btn-xl-r);
}

/* ── Label inner padding (Figma: Label/Left-Right) ──────────────────────────── */

.ds-btn[data-size='sm'] .ds-btn-label {
  padding-inline: var(--ds-btn-sm-label-px);
}

.ds-btn[data-size='md'] .ds-btn-label,
.ds-btn:not([data-size]) .ds-btn-label {
  padding-inline: var(--ds-btn-md-label-px);
}

.ds-btn[data-size='lg'] .ds-btn-label {
  padding-inline: var(--ds-btn-lg-label-px);
}

.ds-btn[data-size='xl'] .ds-btn-label {
  padding-inline: var(--ds-btn-xl-label-px);
}

/* ── Icon Only ──────────────────────────────────────────────────────────────── */

.ds-btn[data-icon-only][data-size='sm']                    { padding: 0; width: var(--ds-btn-sm-h); }
.ds-btn[data-icon-only][data-size='md'],
.ds-btn[data-icon-only]:not([data-size])                   { padding: 0; width: var(--ds-btn-md-h); }
.ds-btn[data-icon-only][data-size='lg']                    { padding: 0; width: var(--ds-btn-lg-h); }
.ds-btn[data-icon-only][data-size='xl']                    { padding: 0; width: var(--ds-btn-xl-h); }

/* ── Icon slots ─────────────────────────────────────────────────────────────── */

.ds-btn-icon-left,
.ds-btn-icon-right,
.ds-btn-icon-content {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  width:       var(--ds-btn-icon-size, 20px);
  height:      var(--ds-btn-icon-size, 20px);
}

.ds-btn-icon-left svg,
.ds-btn-icon-right svg,
.ds-btn-icon-content svg {
  width:  100%;
  height: 100%;
}

/* Lucide icon stroke-width per size */
.ds-btn[data-size='sm'] [data-lucide]                      { stroke-width: 2.25; }
.ds-btn[data-size='md'] [data-lucide],
.ds-btn:not([data-size]) [data-lucide]                     { stroke-width: 2.4; }
.ds-btn[data-size='lg'] [data-lucide],
.ds-btn[data-size='xl'] [data-lucide]                      { stroke-width: 2.0; }

/* ── Label ──────────────────────────────────────────────────────────────────── */

.ds-btn-label {
  flex: 1 1 auto;
}

/* Visually hidden label (iconOnly mode) */
.ds-btn-sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */

.ds-btn-spinner {
  display:       inline-block;
  width:         1em;
  height:        1em;
  border:        2px solid currentColor;
  border-top:    2px solid transparent;
  border-radius: 50%;
  animation:     ds-btn-spin 0.6s linear infinite;
}

@keyframes ds-btn-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   VARIANT × INTENT
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Solid / Brand ─────────────────────────────────────────────────────────── */

.ds-btn[data-variant='solid'][data-intent='brand'] {
  background: var(--ds-brand-500);
  color:      var(--ds-text-invert);
}
.ds-btn[data-variant='solid'][data-intent='brand'][data-hovered],
.ds-btn[data-variant='solid'][data-intent='brand']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-brand-hover);
}
.ds-btn[data-variant='solid'][data-intent='brand'][data-pressed],
.ds-btn[data-variant='solid'][data-intent='brand']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-brand-pressed);
}
.ds-btn[data-variant='solid'][data-intent='brand'][data-disabled],
.ds-btn[data-variant='solid'][data-intent='brand']:disabled,
.ds-btn[data-variant='solid'][data-intent='brand'][aria-disabled='true'] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}

/* ── Solid / Neutral ───────────────────────────────────────────────────────── */

.ds-btn[data-variant='solid'][data-intent='neutral'] {
  background: var(--ds-neutral-fill);
  color:      var(--ds-text-invert);
}
.ds-btn[data-variant='solid'][data-intent='neutral'][data-hovered],
.ds-btn[data-variant='solid'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-neutral-fill-hover);
}
.ds-btn[data-variant='solid'][data-intent='neutral'][data-pressed],
.ds-btn[data-variant='solid'][data-intent='neutral']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-neutral-fill-pressed);
}
.ds-btn[data-variant='solid'][data-intent='neutral'][data-disabled],
.ds-btn[data-variant='solid'][data-intent='neutral']:disabled,
.ds-btn[data-variant='solid'][data-intent='neutral'][aria-disabled='true'] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}


/* ── Solid / Positive ──────────────────────────────────────────────────────── */

.ds-btn[data-variant='solid'][data-intent='positive'] {
  background: var(--ds-pos-default);
  color:      var(--ds-text-invert);
}
.ds-btn[data-variant='solid'][data-intent='positive'][data-hovered],
.ds-btn[data-variant='solid'][data-intent='positive']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-pos-hover);
}
.ds-btn[data-variant='solid'][data-intent='positive'][data-pressed],
.ds-btn[data-variant='solid'][data-intent='positive']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-pos-pressed);
}
.ds-btn[data-variant='solid'][data-intent='positive'][data-disabled],
.ds-btn[data-variant='solid'][data-intent='positive']:disabled,
.ds-btn[data-variant='solid'][data-intent='positive'][aria-disabled='true'] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}


/* ── Solid / Negative ──────────────────────────────────────────────────────── */

.ds-btn[data-variant='solid'][data-intent='negative'] {
  background: var(--ds-neg-default);
  color:      var(--ds-text-invert);
}
.ds-btn[data-variant='solid'][data-intent='negative'][data-hovered],
.ds-btn[data-variant='solid'][data-intent='negative']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-neg-hover);
}
.ds-btn[data-variant='solid'][data-intent='negative'][data-pressed],
.ds-btn[data-variant='solid'][data-intent='negative']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-neg-pressed);
}
.ds-btn[data-variant='solid'][data-intent='negative'][data-disabled],
.ds-btn[data-variant='solid'][data-intent='negative']:disabled,
.ds-btn[data-variant='solid'][data-intent='negative'][aria-disabled='true'] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}


/* ── Outline / Neutral ─────────────────────────────────────────────────────── */

.ds-btn[data-variant='outline'][data-intent='neutral'] {
  background:   transparent;
  border-color: var(--ds-nba-border);
  color:        var(--ds-text-primary);
}
.ds-btn[data-variant='outline'][data-intent='neutral'][data-hovered],
.ds-btn[data-variant='outline'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled) {
  background:   var(--ds-nba-20);
  border-color: var(--ds-nba-border);
}
.ds-btn[data-variant='outline'][data-intent='neutral'][data-pressed],
.ds-btn[data-variant='outline'][data-intent='neutral']:active:not([data-disabled]):not(:disabled) {
  background:   var(--ds-nba-40);
  border-color: var(--ds-stroke-neutral-hover);
}
.ds-btn[data-variant='outline'][data-intent='neutral'][data-disabled],
.ds-btn[data-variant='outline'][data-intent='neutral']:disabled,
.ds-btn[data-variant='outline'][data-intent='neutral'][aria-disabled='true'] {
  border-color: var(--ds-nba-border-disabled);
  color:        var(--ds-disabled-text);
}

/* ── Ghost / Neutral ───────────────────────────────────────────────────────── */

.ds-btn[data-variant='ghost'][data-intent='neutral'] {
  background: transparent;
  color:      var(--ds-text-primary);
}
.ds-btn[data-variant='ghost'][data-intent='neutral'][data-hovered],
.ds-btn[data-variant='ghost'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-20);
}
.ds-btn[data-variant='ghost'][data-intent='neutral'][data-pressed],
.ds-btn[data-variant='ghost'][data-intent='neutral']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-40);
}
.ds-btn[data-variant='ghost'][data-intent='neutral'][data-disabled],
.ds-btn[data-variant='ghost'][data-intent='neutral']:disabled,
.ds-btn[data-variant='ghost'][data-intent='neutral'][aria-disabled='true'] {
  color: var(--ds-disabled-text);
}

/* ── Ghost / Info ──────────────────────────────────────────────────────────── */

.ds-btn[data-variant='ghost'][data-intent='info'] {
  background: transparent;
  color:      var(--ds-info-soft-text);
}
.ds-btn[data-variant='ghost'][data-intent='info'][data-hovered],
.ds-btn[data-variant='ghost'][data-intent='info']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-info-50);
}
.ds-btn[data-variant='ghost'][data-intent='info'][data-pressed],
.ds-btn[data-variant='ghost'][data-intent='info']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-info-soft-hover);
}
.ds-btn[data-variant='ghost'][data-intent='info'][data-disabled],
.ds-btn[data-variant='ghost'][data-intent='info']:disabled,
.ds-btn[data-variant='ghost'][data-intent='info'][aria-disabled='true'] {
  color: var(--ds-disabled-text);
}

/* ── Soft / Neutral ────────────────────────────────────────────────────────── */

.ds-btn[data-variant='soft'][data-intent='neutral'] {
  background: var(--ds-nba-30);
  color:      var(--ds-text-primary);
}
.ds-btn[data-variant='soft'][data-intent='neutral'][data-hovered],
.ds-btn[data-variant='soft'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-20);
}
.ds-btn[data-variant='soft'][data-intent='neutral'][data-pressed],
.ds-btn[data-variant='soft'][data-intent='neutral']:active:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-40);
}
.ds-btn[data-variant='soft'][data-intent='neutral'][data-disabled],
.ds-btn[data-variant='soft'][data-intent='neutral']:disabled,
.ds-btn[data-variant='soft'][data-intent='neutral'][aria-disabled='true'] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}

/* ── Dark mode: neutral hover nba-20 too weak on dark bg → nba-40 (mirrors Button.module.css) ── */
:root:not([data-theme='light']) .ds-btn[data-variant='ghost'][data-intent='neutral'][data-hovered],
:root:not([data-theme='light']) .ds-btn[data-variant='ghost'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled),
:root:not([data-theme='light']) .ds-btn[data-variant='outline'][data-intent='neutral'][data-hovered],
:root:not([data-theme='light']) .ds-btn[data-variant='outline'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled),
:root:not([data-theme='light']) .ds-btn[data-variant='soft'][data-intent='neutral'][data-hovered],
:root:not([data-theme='light']) .ds-btn[data-variant='soft'][data-intent='neutral']:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-40);
}


/* ── Active (selected / toggle) state ───────────────────────────────────────
   Figma: 235-36128 ghost/neutral · 4-616 soft/neutral · 4-659 outline/neutral · 854-10152 ghost/info
   data-active = persistent selected state (toggle buttons, nav items)
   ────────────────────────────────────────────────────────────────────────── */

.ds-btn[data-variant='ghost'][data-intent='neutral'][data-active] {
  background: var(--ds-nba-50);
}
.ds-btn[data-variant='ghost'][data-intent='neutral'][data-active][data-hovered],
.ds-btn[data-variant='ghost'][data-intent='neutral'][data-active]:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-50);
}

.ds-btn[data-variant='soft'][data-intent='neutral'][data-active] {
  background: var(--ds-neutral-fill);
  color:      var(--ds-text-invert);
}
.ds-btn[data-variant='soft'][data-intent='neutral'][data-active][data-hovered],
.ds-btn[data-variant='soft'][data-intent='neutral'][data-active]:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-neutral-fill-hover);
  color:      var(--ds-text-invert);
}

.ds-btn[data-variant='outline'][data-intent='neutral'][data-active] {
  background:   var(--ds-nba-50);
  border-color: var(--ds-neutral-fill);
}
.ds-btn[data-variant='outline'][data-intent='neutral'][data-active][data-hovered],
.ds-btn[data-variant='outline'][data-intent='neutral'][data-active]:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-nba-40);
}

.ds-btn[data-variant='ghost'][data-intent='info'][data-active] {
  background: var(--ds-info-soft-hover);
  color:      var(--ds-info-text-pressed);
}
.ds-btn[data-variant='ghost'][data-intent='info'][data-active][data-hovered],
.ds-btn[data-variant='ghost'][data-intent='info'][data-active]:hover:not([data-disabled]):not(:disabled) {
  background: var(--ds-info-soft-hover);
  color:      var(--ds-info-text-pressed);
}

/* Dark mode: soft/neutral active hover — neutral-fill-hover auto-adapts; no override needed */

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-btn,
  .ds-btn-spinner {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ── Badge (счётчик) — HC-adjacency 3-state (паритет с Button.module.css .badge) ──
   Figma Button 1088:15080–15303. Залит → surface-0; outline/ghost в покое → neutral-medium;
   outline/ghost интерактив → surface-0; disabled → приглушённый. */
.ds-btn-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  min-width:       var(--ds-bdg-md-h);
  height:          var(--ds-bdg-md-h);
  padding:         0 var(--ds-bdg-md-px);
  border-radius:   var(--ds-radius-pill);
  font-size:       var(--ds-bdg-md-fs);
  font-weight:     500;
  line-height:     var(--ds-bdg-md-fs);
  letter-spacing:  0.04em;
  background:      var(--ds-surface-0);
  color:           var(--ds-text-primary);
}
.ds-btn[data-size='sm'] .ds-btn-badge {
  min-width:   var(--ds-bdg-sm-h);
  height:      var(--ds-bdg-sm-h);
  padding:     0 var(--ds-bdg-sm-px);
  font-size:   var(--ds-bdg-sm-fs);
  line-height: var(--ds-bdg-sm-fs);
}
.ds-btn[data-variant='outline'] .ds-btn-badge,
.ds-btn[data-variant='ghost'] .ds-btn-badge {
  background: var(--ds-surface-neutral-medium);
}
.ds-btn[data-variant='outline'][data-hovered] .ds-btn-badge,
.ds-btn[data-variant='outline'][data-pressed] .ds-btn-badge,
.ds-btn[data-variant='outline'][data-active] .ds-btn-badge,
.ds-btn[data-variant='outline']:hover:not([data-disabled]):not(:disabled) .ds-btn-badge,
.ds-btn[data-variant='outline']:active:not([data-disabled]):not(:disabled) .ds-btn-badge,
.ds-btn[data-variant='ghost'][data-hovered] .ds-btn-badge,
.ds-btn[data-variant='ghost'][data-pressed] .ds-btn-badge,
.ds-btn[data-variant='ghost'][data-active] .ds-btn-badge,
.ds-btn[data-variant='ghost']:hover:not([data-disabled]):not(:disabled) .ds-btn-badge,
.ds-btn[data-variant='ghost']:active:not([data-disabled]):not(:disabled) .ds-btn-badge {
  background: var(--ds-surface-0);
}
.ds-btn[data-disabled] .ds-btn-badge,
.ds-btn:disabled .ds-btn-badge {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}