/**
 * Button — atomic primitive.
 *
 * Three variants × three sizes × full state set.
 * References semantic tokens only (--ds-*). No raw values.
 *
 * Markup:
 *   <button class="ds-btn ds-btn--primary">Buy now</button>
 *   <button class="ds-btn ds-btn--secondary ds-btn--lg">Learn more</button>
 *   <a class="ds-btn ds-btn--tertiary" href="...">View details</a>
 *
 * Interactive states (hover/focus/active/disabled) are styled here.
 * Reduced-motion is honoured via --ds-duration-* tokens which collapse
 * to 0ms when the user prefers reduced motion.
 */

.ds-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2xs);

  /* Default size = md */
  padding: var(--ds-space-xs) var(--ds-space-md);
  min-height: var(--ds-space-2xl);

  /* Type */
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body-md);
  font-weight: var(--ds-weight-strong);
  line-height: var(--ds-leading-heading);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* Surface */
  border: 1px solid transparent;
  border-radius: var(--ds-radius-button);
  cursor: pointer;
  user-select: none;

  /* Motion — collapses to 0ms under prefers-reduced-motion */
  transition: background-color var(--ds-duration-instant) var(--ds-ease-default),
              border-color var(--ds-duration-instant) var(--ds-ease-default),
              color var(--ds-duration-instant) var(--ds-ease-default),
              transform var(--ds-duration-instant) var(--ds-ease-default),
              box-shadow var(--ds-duration-instant) var(--ds-ease-default);
}

/* ─── Sizes ──────────────────────────────────────────────────── */
.ds-btn--sm {
  padding: var(--ds-space-3xs) var(--ds-space-sm);
  min-height: var(--ds-space-lg);
  font-size: var(--ds-text-body-sm);
}
.ds-btn--lg {
  padding: var(--ds-space-sm) var(--ds-space-lg);
  min-height: var(--ds-space-xl);
  font-size: var(--ds-text-body-lg);
}

/* ─── Variant: primary ────────────────────────────────────────
   Use for the single most important action on a screen. Hover stays
   in-family (red-500 → red-600 → red-700) per design-language.md §5;
   adds elevation lift to signal high-emphasis affordance per §2. */
.ds-btn--primary {
  background-color: var(--ds-color-bg-action);
  color: var(--ds-color-fg-on-action);
}
.ds-btn--primary:hover:not(:disabled) {
  background-color: var(--ds-color-bg-action-hover);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-card);
}
.ds-btn--primary:active:not(:disabled) {
  background-color: var(--ds-color-bg-action-pressed);
  transform: translateY(0);
  box-shadow: var(--ds-shadow-subtle);
}

/* ─── Variant: secondary ──────────────────────────────────────
   Outline. Use as the companion to a primary in CTA pairs. Hover
   uses a smaller-magnitude tonal shift (subtle in-family bg, no
   fill flip) per design-language.md §2. */
.ds-btn--secondary {
  background-color: transparent;
  color: var(--ds-color-brand-primary);
  border-color: var(--ds-color-border-brand);
}
.ds-btn--secondary:hover:not(:disabled) {
  background-color: var(--ds-color-bg-brand-primary-subtle);
}
.ds-btn--secondary:active:not(:disabled) {
  background-color: var(--ds-color-bg-brand-primary-subtle);
  border-color: var(--ds-color-bg-brand-primary-pressed);
  color: var(--ds-color-bg-brand-primary-pressed);
}

/* ─── Variant: tertiary ───────────────────────────────────────
   Text-only with underline-on-hover. Use for "View all", "Skip". The
   sanctioned link-idiom tier (design-language.md §2) — hover stays
   in the brand-primary family rather than crossing to action red. */
.ds-btn--tertiary {
  background-color: transparent;
  color: var(--ds-color-brand-primary);
  padding-left: var(--ds-space-2xs);
  padding-right: var(--ds-space-2xs);
}
.ds-btn--tertiary:hover:not(:disabled) {
  color: var(--ds-color-bg-brand-primary-pressed);
  text-decoration: underline;
  text-underline-offset: var(--ds-space-3xs);
}

/* ─── States ─────────────────────────────────────────────────── */
.ds-btn:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-ring-offset);
}
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  background-color: var(--ds-color-bg-disabled);
  color: var(--ds-color-fg-disabled);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Reduced-motion: keep colour shifts, drop transform per HIG.
   Already partially handled by --ds-duration-* collapsing to 0,
   but this ensures the lift never renders. */
@media (prefers-reduced-motion: reduce) {
  .ds-btn--primary:hover:not(:disabled),
  .ds-btn--primary:active:not(:disabled) {
    transform: none;
  }
}

/* ─── Full-width modifier ────────────────────────────────────── */
.ds-btn--block { display: flex; width: 100%; }