/* components-buttons-aesthetic.css
 * Phase C: Brand Button Aesthetic Layer
 * Extracted from legacy-styles-we-lost.txt (btn-brand-primary / btn-outline-brand-primary)
 * Purpose: Centralize visual-only button variants separate from theme monolith.
 * NOTE: Ensure markup actually uses these classes before pruning originals permanently.
 */

.btn-brand-primary {
  background: var(--brand-primary) !important;
  border: none !important;
  color: var(--accessible-on-primary, #ffffff) !important;
  font-family: var(--font-heading, var(--font-primary, sans-serif)) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}
.btn-brand-primary:hover,
.btn-brand-primary:focus,
.btn-brand-primary:active {
  background: var(--brand-secondary) !important;
  color: var(--accessible-on-primary, #ffffff) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn-outline-brand-primary {
  background: transparent !important;
  border: 2px solid var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  font-family: var(--font-heading, var(--font-primary, sans-serif)) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}
.btn-outline-brand-primary:hover,
.btn-outline-brand-primary:focus,
.btn-outline-brand-primary:active {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  border-color: var(--brand-primary) !important;
  transform: translateY(-1px);
}

.btn-brand-accent {
  background: var(--brand-accent, var(--accent-color, var(--brand-secondary, #2fc090))) !important;
  border: 2px solid var(--brand-accent, var(--accent-color, var(--brand-secondary, #2fc090))) !important;
  color: var(--accessible-on-accent, #ffffff) !important;
  font-family: var(--font-heading, var(--font-primary, sans-serif)) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 8px 20px rgba(var(--brand-accent-rgb, 47, 192, 144), 0.25);
}
.btn-brand-accent:hover,
.btn-brand-accent:focus,
.btn-brand-accent:active {
  background: color-mix(in srgb, var(--brand-accent, var(--accent-color, var(--brand-secondary, #2fc090))) 88%, black 12%) !important;
  border-color: color-mix(in srgb, var(--brand-accent, var(--accent-color, var(--brand-secondary, #2fc090))) 88%, black 12%) !important;
  color: var(--accessible-on-accent, #ffffff) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(var(--brand-accent-rgb, 47, 192, 144), 0.35);
}