/* =============================================================
 * VI Component: Button
 * vi-btn
 * =============================================================
 *
 * VARIANTS:    vi-btn--primary | vi-btn--secondary | vi-btn--ghost | vi-btn--destructive
 * SIZES:       vi-btn--sm | vi-btn--md (default) | vi-btn--lg
 * STATES:      :hover | :active | :focus-visible | :disabled | [aria-disabled]
 * MODIFIERS:   vi-btn--full (full width) | vi-btn--icon (icon-only square)
 *
 * USAGE PATTERN:
 *   <button class="vi-btn vi-btn--primary">Label</button>
 *   <button class="vi-btn vi-btn--secondary vi-btn--sm">Small</button>
 *   <button class="vi-btn vi-btn--primary" disabled>Disabled</button>
 *   <a href="#" class="vi-btn vi-btn--primary">Link Button</a>
 *
 * TOKENS: Tier 3 (--btn-*) defined below, mapping to Tier 2 roles.
 *         Rules reference Tier 3 ONLY — never --primitive-* or
 *         Tier 2 directly. Skins re-theme this component by
 *         overriding primitives; nothing here changes.
 * ============================================================= */

/* ── Tier 3 component tokens ── */
.vi-btn {
  /* structure + type */
  --btn-font-family:  var(--font-family-body);
  --btn-font-size:    var(--font-size-sm);
  --btn-font-weight:  var(--font-weight-semibold);
  --btn-leading:      var(--font-leading-none);
  --btn-gap:          var(--spacing-component-gap-sm);
  --btn-padding-y:    var(--spacing-component-padding-sm);
  --btn-padding-x:    var(--spacing-component-padding-lg);
  --btn-radius:       var(--radius-button);
  --btn-border-width: var(--border-width-medium);
  --btn-shadow:       var(--shadow-button);

  /* motion */
  --btn-duration:     var(--motion-duration-normal);
  --btn-ease:         var(--motion-ease-standard);

  /* focus ring */
  --btn-focus-ring-width:  var(--focus-ring-width);
  --btn-focus-ring-offset: var(--focus-ring-offset);
  --btn-focus-ring-fill:   var(--color-interactive-focus);

  /* variant: primary */
  --btn-primary-bg:        var(--color-interactive-default);
  --btn-primary-bg-hover:  var(--color-interactive-hover);
  --btn-primary-bg-active: var(--color-interactive-active);
  --btn-primary-text:      var(--color-text-on-brand);

  /* variant: secondary */
  --btn-secondary-text:          var(--color-interactive-default);
  --btn-secondary-border:        var(--color-interactive-default);
  --btn-secondary-bg-hover:      var(--color-background-subtle);
  --btn-secondary-text-hover:    var(--color-interactive-hover);
  --btn-secondary-border-hover:  var(--color-interactive-hover);
  --btn-secondary-bg-active:     var(--color-background-subtle);
  --btn-secondary-text-active:   var(--color-interactive-active);
  --btn-secondary-border-active: var(--color-interactive-active);

  /* variant: ghost */
  --btn-ghost-text:          var(--color-text-primary);
  --btn-ghost-border:        var(--color-border-default);
  --btn-ghost-bg-hover:      var(--color-background-subtle);
  --btn-ghost-border-hover:  var(--color-border-strong);
  --btn-ghost-bg-active:     var(--color-background-subtle);
  --btn-ghost-border-active: var(--color-border-strong);

  /* variant: destructive */
  --btn-destructive-bg:       var(--color-feedback-error-strong);
  --btn-destructive-bg-hover: var(--color-feedback-error-strong-hover);
  --btn-destructive-text:     var(--color-text-inverse);

  /* state: disabled (all variants) */
  --btn-disabled-bg:   var(--color-interactive-disabled);
  --btn-disabled-text: var(--color-text-disabled);

  /* size: sm */
  --btn-sm-padding-y: var(--spacing-component-padding-xs);
  --btn-sm-padding-x: var(--spacing-component-padding-md);
  --btn-sm-font-size: var(--font-size-xs);

  /* size: lg */
  --btn-lg-padding-y: var(--spacing-component-padding-md);
  --btn-lg-padding-x: var(--spacing-component-padding-xl);
  --btn-lg-font-size: var(--font-size-md);
}

/* ── Base ── */
.vi-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--btn-gap);
  padding:         var(--btn-padding-y) var(--btn-padding-x);
  border-radius:   var(--btn-radius);
  border:          var(--btn-border-width) solid transparent;
  font-family:     var(--btn-font-family);
  font-size:       var(--btn-font-size);
  font-weight:     var(--btn-font-weight);
  line-height:     var(--btn-leading);
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  transition:
    background-color var(--btn-duration) var(--btn-ease),
    color            var(--btn-duration) var(--btn-ease),
    border-color     var(--btn-duration) var(--btn-ease),
    box-shadow       var(--btn-duration) var(--btn-ease),
    opacity          var(--btn-duration) var(--btn-ease);
}

.vi-btn:focus-visible {
  outline:        var(--btn-focus-ring-width) solid var(--btn-focus-ring-fill);
  outline-offset: var(--btn-focus-ring-offset);
}

/* ── Disabled (works on all variants) ── */
.vi-btn:disabled,
.vi-btn[aria-disabled="true"] {
  background-color: var(--btn-disabled-bg);
  color:            var(--btn-disabled-text);
  border-color:     transparent;
  box-shadow:       none;
  cursor:           not-allowed;
  pointer-events:   none;
}


/* ── Variant: Primary ── */
.vi-btn--primary {
  background-color: var(--btn-primary-bg);
  color:            var(--btn-primary-text);
  box-shadow:       var(--btn-shadow);
}

.vi-btn--primary:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
}

.vi-btn--primary:active:not(:disabled) {
  background-color: var(--btn-primary-bg-active);
  box-shadow:       none;
}


/* ── Variant: Secondary (outlined) ── */
.vi-btn--secondary {
  background-color: transparent;
  color:            var(--btn-secondary-text);
  border-color:     var(--btn-secondary-border);
}

.vi-btn--secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-bg-hover);
  border-color:     var(--btn-secondary-border-hover);
  color:            var(--btn-secondary-text-hover);
}

.vi-btn--secondary:active:not(:disabled) {
  background-color: var(--btn-secondary-bg-active);
  border-color:     var(--btn-secondary-border-active);
  color:            var(--btn-secondary-text-active);
}


/* ── Variant: Ghost ── */
.vi-btn--ghost {
  background-color: transparent;
  color:            var(--btn-ghost-text);
  border-color:     var(--btn-ghost-border);
}

.vi-btn--ghost:hover:not(:disabled) {
  background-color: var(--btn-ghost-bg-hover);
  border-color:     var(--btn-ghost-border-hover);
}

.vi-btn--ghost:active:not(:disabled) {
  background-color: var(--btn-ghost-bg-active);
  border-color:     var(--btn-ghost-border-active);
}


/* ── Variant: Destructive ── */
.vi-btn--destructive {
  background-color: var(--btn-destructive-bg);
  color:            var(--btn-destructive-text);
  border-color:     transparent;
}

.vi-btn--destructive:hover:not(:disabled),
.vi-btn--destructive:active:not(:disabled) {
  background-color: var(--btn-destructive-bg-hover);
}


/* ── Size: Small ── */
.vi-btn--sm {
  padding:   var(--btn-sm-padding-y) var(--btn-sm-padding-x);
  font-size: var(--btn-sm-font-size);
}

/* ── Size: Medium (default — no modifier needed) ── */

/* ── Size: Large ── */
.vi-btn--lg {
  padding:   var(--btn-lg-padding-y) var(--btn-lg-padding-x);
  font-size: var(--btn-lg-font-size);
}


/* ── Modifier: Full width ── */
.vi-btn--full {
  width: 100%;
}

/* ── Modifier: Icon-only (square, no text) ── */
.vi-btn--icon {
  padding: var(--btn-padding-y);
  aspect-ratio: 1; /* structural: icon buttons are square by definition */
}

.vi-btn--icon.vi-btn--sm { padding: var(--btn-sm-padding-y); }
.vi-btn--icon.vi-btn--lg { padding: var(--btn-lg-padding-y); }


/* ── Reduced motion ──
 * Required pattern on every motion state. The global guard in
 * styles/motion.css covers the layered vi.css cascade; this block
 * keeps the component safe when its file is loaded standalone
 * (e.g. the docs pages link component files directly). */
@media (prefers-reduced-motion: reduce) {
  .vi-btn {
    transition: none;
  }
}