/* buttons.css - 06 Oct 2026 v2: D-12 PROGRESS-FIT. A full-width button wraps its words
   (.btn is nowrap, so "None of these, show me everything" and "Not sure?
   I'll pick something" ran off the phone at large text). Line height 1.25
   for a wrapped second line; one line stays inside the 48px minimum; two
   lines are balanced, so one word is not left alone underneath. */
/* buttons.css - 14 May 2026 v1: replaced ::before hover overlay with brightness filter */
/* buttons.css - Modern button components for Midnight Teal theme */

/* ============================================
   BASE BUTTON
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  min-height: 48px;
  position: relative;
  overflow: hidden;
}

/* Focus state for accessibility */
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   PRIMARY BUTTON
   ============================================ */

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-inverse);
  box-shadow:
    0 2px 8px rgba(45, 212, 191, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hover and active: brightness filter only — no ::before overlay.
   Previous ::before approach caused text to become invisible on mobile
   when the touch/hover state stuck. Brightness is layering-free. */
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(45, 212, 191, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
  filter: brightness(0.95);
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 1px 4px rgba(45, 212, 191, 0.3);
}

/* ============================================
   SECONDARY BUTTON (Outlined)
   ============================================ */

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(45, 212, 191, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.2);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
  background: rgba(45, 212, 191, 0.15);
}

/* ============================================
   GHOST BUTTON (Subtle)
   ============================================ */

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

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.btn-ghost:active {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   TEXT BUTTON (Link-like)
   ============================================ */

.btn-text {
  background: transparent;
  color: var(--color-primary);
  padding: var(--space-2) var(--space-3);
  min-height: auto;
  font-weight: var(--font-medium);
}

.btn-text:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   DANGER BUTTON
   ============================================ */

.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-danger:hover {
  background: #F43F5E;
  transform: translateY(-1px);
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

.btn-small {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  min-height: 36px;
  border-radius: var(--radius-md);
}

.btn-large {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  min-height: 56px;
  border-radius: var(--radius-xl);
}

.btn-full {
  width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-wrap: balance;
}

/* ============================================
   ICON BUTTON
   ============================================ */

.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-full);
}

.btn-icon.btn-small {
  width: 36px;
  height: 36px;
}

.btn-icon.btn-large {
  width: 56px;
  height: 56px;
}

/* ============================================
   STATES
   ============================================ */

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading */
.btn.loading {
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.btn-primary.loading::after {
  border-top-color: var(--color-text-inverse);
}

.btn-secondary.loading::after,
.btn-ghost.loading::after {
  border-top-color: var(--color-primary);
}

/* ============================================
   BUTTON GROUPS
   ============================================ */

.btn-group {
  display: flex;
  gap: var(--space-3);
}

.btn-group-vertical {
  flex-direction: column;
}

.btn-group-full .btn {
  flex: 1;
}

/* Stacked buttons with consistent spacing */
.btn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* ============================================
   SPECIAL BUTTON VARIANTS
   ============================================ */

/* Card-style button (larger tap target) */
.btn-card {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  justify-content: flex-start;
  color: var(--color-text);
}

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

.btn-card.selected {
  border-color: var(--color-primary);
  background: rgba(45, 212, 191, 0.1);
}

/* Pill button (for tags, filters) */
.btn-pill {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  min-height: 36px;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.btn-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.btn-pill.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* ============================================
   ANIMATION
   ============================================ */

@keyframes spin {
  to { transform: rotate(360deg); }
}