/* ==========================================================================
   Component: Button
   ========================================================================== */

/*
 * Button component with variants and sizes.
 * Uses the c- prefix for component classes.
 */

/* Base button styles */
.c-button {
  /* Layout */
  align-items: center;
  display: inline-flex;
  gap: var(--space-xs);
  justify-content: center;

  /* Spacing */
  padding: var(--space-sm) var(--space-md);

  /* Typography */
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-align: center;
  text-decoration: none;

  /* Visual */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;

  /* Animation */
  transition: all var(--transition-base);
}

.c-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Variant: Primary */
.c-button--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

.c-button--primary:hover:not(:disabled) {
  background-color: var(--primary-emphasis);
  border-color: var(--primary-emphasis);
}

.c-button--primary:active:not(:disabled) {
  background-color: var(--primary-text);
  border-color: var(--primary-text);
  transform: translateY(1px);
}

/* Variant: Secondary */
.c-button--secondary {
  background-color: var(--surface-section);
  border-color: var(--surface-border);
  color: var(--text-color);
}

.c-button--secondary:hover:not(:disabled) {
  background-color: var(--surface-hover);
  border-color: var(--color-surface-300);
}

.c-button--secondary:active:not(:disabled) {
  background-color: var(--color-surface-200);
}

/* Variant: Success */
.c-button--success {
  background-color: var(--success);
  border-color: var(--success);
  color: var(--success-contrast);
}

.c-button--success:hover:not(:disabled) {
  background-color: var(--success-emphasis);
  border-color: var(--success-emphasis);
}

.c-button--success:active:not(:disabled) {
  background-color: var(--success-text);
  border-color: var(--success-text);
}

/* Variant: Info */
.c-button--info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--info-contrast);
}

.c-button--info:hover:not(:disabled) {
  background-color: var(--info-emphasis);
  border-color: var(--info-emphasis);
}

.c-button--info:active:not(:disabled) {
  background-color: var(--info-text);
  border-color: var(--info-text);
}

/* Variant: Warning */
.c-button--warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--warning-contrast);
}

.c-button--warning:hover:not(:disabled) {
  background-color: var(--warning-emphasis);
  border-color: var(--warning-emphasis);
}

.c-button--warning:active:not(:disabled) {
  background-color: var(--warning-text);
  border-color: var(--warning-text);
}

/* Variant: Danger */
.c-button--danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--danger-contrast);
}

.c-button--danger:hover:not(:disabled) {
  background-color: var(--danger-emphasis);
  border-color: var(--danger-emphasis);
}

.c-button--danger:active:not(:disabled) {
  background-color: var(--danger-text);
  border-color: var(--danger-text);
}

/* Variant: Ghost */
.c-button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-text);
}

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

.c-button--ghost:active:not(:disabled) {
  background-color: var(--color-surface-200);
}

/* Size: Small */
.c-button--small {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

/* Size: Medium (default) */
.c-button--medium {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
}

/* Size: Large */
.c-button--large {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-lg);
}

/* State: Disabled */
.c-button:disabled,
.c-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

/* Element: Icon */
.c-button__icon {
  align-items: center;
  display: inline-flex;
}