/* @spec-kitty/html-js — sk-button shared styles */
/* All values use --sk-* tokens only — no hardcoded values */

.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-space-2);
  padding: var(--sk-space-3) var(--sk-space-7);
  border: 1px solid transparent;
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-font-sans);
  font-size: var(--sk-text-base);
  font-weight: var(--sk-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition:
    box-shadow var(--sk-motion-duration-fast) var(--sk-motion-ease-out),
    border-color var(--sk-motion-duration-fast) var(--sk-motion-ease-out),
    background var(--sk-motion-duration-fast) var(--sk-motion-ease-out);
  text-decoration: none;
}

/* Primary variant — yellow fill, dark ink text, pill shape */
.sk-btn--primary {
  background: var(--sk-color-yellow);
  color: var(--sk-fg-on-primary);
  border-color: transparent;
}

.sk-btn--primary:hover {
  box-shadow: var(--sk-shadow-glow-primary);
}

.sk-btn--primary:active {
  transform: scale(0.97);
}

/* Secondary variant — transparent background, border, default text */
.sk-btn--secondary {
  background: transparent;
  color: var(--sk-fg-default);
  border-color: var(--sk-border-default);
}

.sk-btn--secondary:hover {
  border-color: var(--sk-border-strong);
}

/* Ghost variant — no border, transparent, muted text */
.sk-btn--ghost {
  background: transparent;
  color: var(--sk-fg-muted);
  border-color: transparent;
}

.sk-btn--ghost:hover {
  color: var(--sk-fg-default);
}

/* Small size modifier */
.sk-btn--sm {
  padding: var(--sk-space-2) var(--sk-space-5);
  font-size: var(--sk-text-sm);
}

/* Disabled state */
.sk-btn:disabled,
.sk-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}