/**
 * Button Component
 */

/*
 * Reset link styles when used as buttons
 * Anchors inherit --color-link (green) which overrides button text colors.
 * We must explicitly set colors for all anchor button variants.
 */

/* Base button anchor reset */
a.c-btn,
a.c-btn:visited,
a.c-btn:hover,
a.c-btn:active,
a.btn,
a.btn:visited,
a.btn:hover,
a.btn:active {
  text-shadow: none;
  text-decoration: none;
}

/* Primary button anchors - black text on green background */
a.c-btn--primary,
a.c-btn--primary:visited,
a.c-btn--primary:hover,
a.c-btn--primary:active,
a.btn-primary,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
  color: var(--color-bg-primary) !important;
  text-shadow: none;
}

/* Secondary/default button anchors - green text */
a.c-btn:not(.c-btn--primary):not(.c-btn--danger),
a.c-btn:not(.c-btn--primary):not(.c-btn--danger):visited,
a.c-btn--secondary,
a.c-btn--secondary:visited,
a.c-btn--secondary:hover,
a.c-btn--secondary:active,
a.c-btn--ghost,
a.c-btn--ghost:visited,
a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:active {
  color: var(--color-primary);
  text-shadow: none;
}

/* Danger button anchors - white text */
a.c-btn--danger,
a.c-btn--danger:visited,
a.c-btn--danger:hover,
a.c-btn--danger:active {
  color: var(--color-text-primary);
  text-shadow: none;
}

.c-btn {
  display: inline-block;
  padding: var(--button-padding-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  background-color: var(--color-bg-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.c-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
  transform: translateY(-1px);
  text-decoration: none;
}

.c-btn:active {
  transform: translateY(0);
}

.c-btn:disabled,
.c-btn--disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants */
.c-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
  border: 1px solid var(--color-primary);
}

.c-btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.c-btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.c-btn--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-primary);
}

.c-btn--secondary:active {
  background-color: transparent;
  color: var(--color-primary);
  transform: translateY(0);
}

.c-btn--danger {
  background-color: var(--color-danger);
  color: var(--color-text-primary);
}

.c-btn--danger:hover {
  background-color: #cc0000;
}

.c-btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: none;
}

.c-btn--ghost:hover {
  background-color: var(--color-bg-surface);
}

/* Sizes */
.c-btn--sm {
  padding: var(--button-padding-sm);
  font-size: var(--font-size-sm);
}

.c-btn--lg {
  padding: var(--button-padding-lg);
  font-size: var(--font-size-lg);
}

.c-btn--block {
  display: block;
  width: 100%;
}

/* Legacy .btn classes for backwards compatibility */
.btn {
  display: inline-block;
  padding: var(--button-padding-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark, #00CC00);
  border-color: var(--color-primary-dark, #00CC00);
  color: var(--color-bg-primary);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: rgba(0, 255, 0, 0.1);
  color: var(--color-primary);
}