/* ==========================================================================
   button.css — button system
   --------------------------------------------------------------------------
   Milestone 4 · Button System

   Spec: Phase 1 §7 (Button System) · Phase 5 §4.1 (BaseButton) · §4.2
   (Button Variants). Global state model §1.6, motion model §1.7,
   interaction overlays Phase 1 §1.4.

   Imported by components.css — button styles live nowhere else.

   Variants: primary · secondary · outline · ghost · text · icon · cta
   States:   default, hover (+10% heading overlay / +8% brand tint, one
   elevation step), active (+16%, translateY 1px, shadow removed),
   focus-visible (global 2px primary ring, keyboard only), disabled
   (opacity 40%, no pointer events).

   Forced-state classes (.is-hover / .is-active / .is-focus) mirror the real
   pseudo-class states so pages/components.html can preview every state
   statically. They are showcase-only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BaseButton — Phase 5 §4.1 (md: h44 · 0 24px · radius-sm · Button 16/15)
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding-block: var(--space-8);
  padding-inline: var(--space-24);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--text-button-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-button);
  letter-spacing: var(--tracking-button);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

/* Compact size (sm: h40 · 0 16px, Phase 5 §4.1) — used inside ProductCard */
.button--sm {
  min-height: 40px;
  padding-block: 0;
  padding-inline: var(--space-16);
}

/* --------------------------------------------------------------------------
   Primary — white on primary (11.4:1 ✓)
   -------------------------------------------------------------------------- */
.button--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.button--primary:hover:not(:disabled),
.button--primary.is-hover {
  background: color-mix(in srgb, var(--color-heading) 10%, var(--color-primary));
  box-shadow: var(--shadow-raised);
}

.button--primary:active:not(:disabled),
.button--primary.is-active {
  background: color-mix(in srgb, var(--color-heading) 16%, var(--color-primary));
  box-shadow: none;
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Secondary — heading on secondary (13.8:1 ✓; white fails, never used)
   -------------------------------------------------------------------------- */
.button--secondary {
  background: var(--color-secondary);
  color: var(--color-heading);
}

.button--secondary:hover:not(:disabled),
.button--secondary.is-hover {
  background: color-mix(in srgb, var(--color-heading) 10%, var(--color-secondary));
  box-shadow: var(--shadow-raised);
}

.button--secondary:active:not(:disabled),
.button--secondary.is-active {
  background: color-mix(in srgb, var(--color-heading) 16%, var(--color-secondary));
  box-shadow: none;
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Outline — primary text, 1px primary border, +8%/+16% primary tint
   -------------------------------------------------------------------------- */
.button--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.button--outline:hover:not(:disabled),
.button--outline.is-hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.button--outline:active:not(:disabled),
.button--outline.is-active {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Ghost — toolbar contexts; surface fill on hover
   -------------------------------------------------------------------------- */
.button--ghost {
  background: transparent;
  color: var(--color-primary);
}

.button--ghost:hover:not(:disabled),
.button--ghost.is-hover {
  background: var(--color-surface);
}

.button--ghost:active:not(:disabled),
.button--ghost.is-active {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Text — inline destinations; underline reveal (8px 4px padding per §7.2)
   -------------------------------------------------------------------------- */
.button--text {
  background: transparent;
  color: var(--color-primary);
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
}

.button--text:hover:not(:disabled),
.button--text.is-hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 6px;
}

.button--text:active:not(:disabled),
.button--text.is-active {
  text-decoration-color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Icon — fixed 44×44, 1px border; surface fill on hover, primary border
   when pressed
   -------------------------------------------------------------------------- */
.button--icon {
  width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  color: var(--color-primary);
  border-color: var(--color-border);
}

.button--icon .button__icon {
  width: 24px;
  height: 24px;
}

.button--icon:hover:not(:disabled),
.button--icon.is-hover {
  background: var(--color-surface);
}

.button--icon:active:not(:disabled),
.button--icon.is-active {
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Large CTA — hero/final bands only (maximum one per viewport, Phase 1 §7.2)
   -------------------------------------------------------------------------- */
.button--cta {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-16);
  padding-inline: var(--space-32);
  font-size: var(--text-body-large-current);
}

.button--cta:hover:not(:disabled),
.button--cta.is-hover {
  background: color-mix(in srgb, var(--color-heading) 10%, var(--color-primary));
  box-shadow: var(--shadow-raised);
}

.button--cta:active:not(:disabled),
.button--cta.is-active {
  background: color-mix(in srgb, var(--color-heading) 16%, var(--color-primary));
  box-shadow: none;
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Disabled — 40% opacity, no shadow, no pointer events, no hover (Phase 1
   §7.1 / Phase 5 §1.6). Native `:disabled` plus the aria-disabled pattern
   for link-as-button cases.
   -------------------------------------------------------------------------- */
.button:disabled,
.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.4;
  box-shadow: none;
  pointer-events: none;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Showcase-only forced focus — mirrors the global :focus-visible ring so the
   preview page can display the state statically.
   -------------------------------------------------------------------------- */
.button.is-focus {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}