/*
 * VM Design System v3.1.0 - Button Styles
 * Complete button component styling using design tokens
 */

.btn {
  padding: var(--vm-component-button-padding-md);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: var(--vm-typography-font-weight-semibold);
  transition: all var(--transition-base);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--vm-typography-font-size-sm);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--vm-red) 0%, var(--vm-red-dark) 100%);
  color: var(--vm-white) !important;
  border-color: var(--vm-red);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--vm-red-dark) 0%, var(--vm-red-800) 100%);
  color: var(--vm-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:visited,
.btn-primary:active,
.btn-primary:focus {
  color: var(--vm-white) !important;
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
  font-weight: var(--vm-typography-font-weight-semibold);
}

.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-text-hover);
  border-color: var(--btn-secondary-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary:visited,
.btn-secondary:active,
.btn-secondary:focus {
  color: var(--btn-secondary-text);
}

.btn-outline {
  background: var(--btn-outline-bg);
  color: var(--btn-outline-text);
  border-color: var(--btn-outline-border);
  font-weight: var(--vm-typography-font-weight-semibold);
}

.btn-outline:hover {
  background: var(--btn-outline-bg-hover);
  color: var(--btn-outline-text-hover);
  border-color: var(--btn-outline-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline:visited,
.btn-outline:active,
.btn-outline:focus {
  color: var(--btn-outline-text);
}

.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
  color: var(--vm-white);
}

.btn-warning {
  background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
  color: var(--vm-white);
}

.btn-danger { background: linear-gradient(135deg, var(--error-dark) 0%, var(--vm-red-900) 100%); color: var(--vm-white); border-color: var(--error-dark); }

.btn-sm {
  padding: var(--vm-component-button-padding-sm);
  font-size: var(--vm-typography-font-size-xs);
}

.btn-lg {
  padding: var(--vm-component-button-padding-lg);
  font-size: var(--vm-typography-font-size-lg);
}

.btn-block { width: 100%; justify-content: center; }