/* Button Component - Standardized button styles */

/* Base button styles */
.btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.btn:focus-visible {
  outline: 2px solid var(--status-ready);
  outline-offset: 2px;
}

/* Size variants */
.btn--sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 6px;
}

.btn--md {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 8px;
}

.btn--lg {
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  border-radius: 8px;
}

/* Emphasis variants */

/* Strong (default) - Dark background, white text */
.btn--strong {
  color: #ffffff;
  background: #2e2e2e;
  border: none;
}

.btn--strong:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  .btn--strong {
    background: #404040;
    color: #ffffff;
  }

  .btn--strong:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #525252;
  }
}

/* Brand - Blue background, white text */
.btn--brand {
  color: #ffffff;
  background: #0085ff;
  border: none;
}

.btn--brand:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #0070dd;
}

/* Muted - Transparent background, bordered */
.btn--muted {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  font-weight: 400;
}

.btn--muted:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--card-bg);
  border-color: var(--text-color);
  color: var(--text-color);
}

/* Ghost - Transparent, no border, text only */
.btn--ghost {
  color: var(--text-color);
  background: transparent;
  border: none;
  font-weight: 400;
}

.btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--card-bg);
  color: var(--text-color);
}

/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--muted:disabled,
.btn--muted[aria-disabled="true"] {
  opacity: 0.4;
}

/* Special modifiers */

/* Danger variant (for delete buttons) */
.btn--danger {
  color: #cc0000 !important;
}

.btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #ffeeee !important;
}

@media (prefers-color-scheme: dark) {
  .btn--danger {
    color: #ff6666 !important;
  }

  .btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #4a1f1f !important;
  }
}