// ─────────────────────────────────────────────────────────────────────────────
// Component: Buttons
// File:      src/scss/components/_buttons.scss
//
// Variants:  .btn--primary .btn--ghost .btn--danger .btn--secondary
//            .btn--create .btn--accent .btn--cta .btn--sm
// Tokens:    --color-accent, --color-success, --color-danger, --gradient-spectral
//            --bg-overlay, --bg-hover, --border-default, --text-primary
// Usage:     <button class="btn btn--primary">Save</button>
//
// Notes:     .btn--cta uses the spectral gradient — reserved for marketing CTAs.
//            .btn--primary is accent blue (interactive confirm).
//            .btn--danger is for destructive actions only.
// ─────────────────────────────────────────────────────────────────────────────

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  border-radius: var(--radius-base);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-tight);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0;

  svg { flex-shrink: 0; }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &:active:not(:disabled) {
    transform: translateY(0);
    opacity: 0.95;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

.btn--primary, .btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);

  &:not(:disabled):hover {
    opacity: 0.88;
    transform: translateY(-1px);
    text-decoration: none;
  }
}

.btn--ghost, .btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);

  &:not(:disabled):hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
    text-decoration: none;
  }
}

.btn--danger, .btn-danger {
  background: var(--color-danger-bg);
  color: #fff;
  border-color: var(--color-danger-bg);

  &:not(:disabled):hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    text-decoration: none;
  }
}

.btn--secondary, .btn-secondary {
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border-color: var(--border-default);

  &:not(:disabled):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
    text-decoration: none;
  }
}

.btn--create, .btn-create {
  background: var(--color-success-bg);
  color: #fff;
  border-color: var(--color-success-bg);

  &:not(:disabled):hover {
    background: var(--color-success);
    border-color: var(--color-success);
    text-decoration: none;
  }
}

.btn--accent, .btn-accent {
  background: var(--color-accent-muted);
  color: var(--text-primary);
  border-color: var(--color-accent-muted);

  &:not(:disabled):hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    text-decoration: none;
  }
}

.btn--cta, .btn-cta {
  background: var(--gradient-spectral);
  color: #fff;
  border-color: transparent;
  font-weight: var(--weight-semibold);

  &:not(:disabled):hover {
    opacity: 0.88;
    transform: translateY(-1px);
    text-decoration: none;
  }
}

.btn--sm, .btn-sm {
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn--lg, .btn-lg {
  padding: 10px var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}