/*
  ==========================================
  BUTTON COMPONENT SYSTEM
  MILLION DOLLAR BUGS ACADEMY
  ==========================================
  
  Comprehensive button system following Kent C. Dodds' "Make it work, make it right, make it fast" approach.
  Implements Robert C. Martin's Single Responsibility Principle and Open/Closed Principle.
  
  "Good software, like good wine, takes time." - Joel Spolsky
  "The secret to building large apps is never build large apps." - Justin Meyer
  
  Architecture Philosophy:
  1. Single Responsibility - Each button class has one clear purpose
  2. Open/Closed Principle - Extensible through variants, closed to modification  
  3. Composition over Inheritance - Build complex buttons from simple base
  4. Progressive Enhancement - Works without JavaScript, enhanced with it
  5. Educational Clarity - Code teaches good practices while functioning
  
  Dependencies:
  - design-tokens.css (must be imported first)
*/

/*
  ==========================================
  1. BASE BUTTON FOUNDATION
  ==========================================
  Following Ian Sommerville's systematic approach to component design
*/

/**
 * Base button class implementing Single Responsibility Principle
 * Provides foundation for all button variants without visual styling
 * 
 * Design decisions explained:
 * - inline-flex: Allows icons + text alignment with gap property
 * - min-height: Ensures consistent touch targets (44px+ for accessibility)
 * - white-space: nowrap prevents text wrapping in buttons
 * - user-select: none prevents text selection during interaction
 */
.btn {
  /* Layout & Structure - Foundation */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  /* Sizing & Spacing - Using design tokens */
  min-height: var(--button-height-medium);
  padding: 0 var(--button-padding-x-medium);
  
  /* Typography - Semantic font composition */
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-decoration: none;
  white-space: nowrap;
  
  /* Visual Design - Minimal base appearance */
  border: 2px solid transparent;
  border-radius: var(--button-radius);
  background: none;
  cursor: pointer;
  user-select: none;
  
  /* Interaction - Smooth transitions */
  transition: var(--button-transition);
  
  /* Accessibility - Focus management */
  outline: none;
  position: relative;
}

/**
 * Focus state following WCAG 2.1 guidelines
 * Uses :focus-visible for keyboard-only focus indication
 * Provides clear visual feedback without mouse interference
 */
.btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-radius: var(--button-radius);
}

/**
 * Disabled state implementation
 * Supports both :disabled and aria-disabled for comprehensive coverage
 * Follows progressive enhancement principles
 */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/*
  ==========================================
  2. SIZE VARIANTS
  ==========================================
  Systematic scaling following modular design principles
*/

/**
 * Small button variant
 * Optimized for secondary actions and compact layouts
 * Maintains accessibility standards while reducing visual weight
 */
.btn--small {
  min-height: var(--button-height-small);
  padding: 0 var(--button-padding-x-small);
  font-size: var(--font-size-sm);
  gap: var(--space-1_5);
}

/**
 * Large button variant  
 * Emphasizes primary actions and improves mobile usability
 * Larger touch target enhances accessibility
 */
.btn--large {
  min-height: var(--button-height-large);
  padding: 0 var(--button-padding-x-large);
  font-size: var(--font-size-lg);
  gap: var(--space-3);
}

/*
  ==========================================
  3. VISUAL STYLE VARIANTS
  ==========================================
  Following Martin Fowler's patterns for extensible design
*/

/**
 * Primary button - Main call-to-action
 * High contrast, maximum visual weight
 * Uses brand colors for consistent identity
 */
.btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

.btn--primary:hover {
  background: var(--color-brand-primary-hover);
  border-color: var(--color-brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  background: var(--color-brand-primary-active);
  border-color: var(--color-brand-primary-active);
  transform: translateY(0);
}

/**
 * Secondary button - Supporting actions
 * Lower visual weight than primary, maintains accessibility
 * Inverts colors for visual hierarchy
 */
.btn--secondary {
  background: var(--color-surface-primary);
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn--secondary:hover {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

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

/**
 * Ghost button - Minimal visual weight
 * For tertiary actions and subtle interactions
 * Maintains accessibility with sufficient contrast
 */
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-secondary);
}

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

.btn--ghost:active {
  background: var(--color-surface-tertiary);
}

/**
 * Outline button - Clean, professional appearance
 * Alternative to ghost for better definition
 */
.btn--outline {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn--outline:hover {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/*
  ==========================================
  4. SEMANTIC VARIANTS
  ==========================================
  Educational cost indicators following UX best practices
*/

/**
 * Safe action button - Low-risk operations
 * Green indicates safety and positive outcomes
 * Perfect for beginner-level actions
 */
.btn--safe {
  background: var(--color-cost-safe);
  color: var(--color-text-inverse);
  border-color: var(--color-cost-safe);
}

.btn--safe:hover {
  background: var(--color-cost-safe-dark);
  border-color: var(--color-cost-safe-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/**
 * Expensive action button - Medium-risk operations
 * Orange/amber indicates caution needed
 * For intermediate-level complexities
 */
.btn--expensive {
  background: var(--color-cost-expensive);
  color: var(--color-text-inverse);
  border-color: var(--color-cost-expensive);
}

.btn--expensive:hover {
  background: var(--color-cost-expensive-dark);
  border-color: var(--color-cost-expensive-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/**
 * Critical action button - High-risk operations
 * Red indicates danger and irreversible actions
 * For expert-level decisions
 */
.btn--critical {
  background: var(--color-cost-critical);
  color: var(--color-text-inverse);
  border-color: var(--color-cost-critical);
}

.btn--critical:hover {
  background: var(--color-cost-critical-dark);
  border-color: var(--color-cost-critical-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/**
 * Warning button - Requires attention
 * For actions that need confirmation
 */
.btn--warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);
  border-color: var(--color-warning);
}

.btn--warning:hover {
  background: var(--color-warning);
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/**
 * Success button - Positive confirmation
 * For completing successful actions
 */
.btn--success {
  background: var(--color-success);
  color: var(--color-text-inverse);
  border-color: var(--color-success);
}

.btn--success:hover {
  background: var(--color-success);
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/*
  ==========================================
  5. LOADING STATE
  ==========================================
  Following progressive enhancement principles
*/

/**
 * Loading button state
 * Maintains button dimensions while showing progress
 * Prevents duplicate submissions during async operations
 */
.btn--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: btn-spin 1s linear infinite;
}

/* Loading spinner animation */
@keyframes btn-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Size-specific loading adjustments */
.btn--small.btn--loading::after {
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
}

.btn--large.btn--loading::after {
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
}

/*
  ==========================================
  6. BUTTON COMPOSITIONS
  ==========================================
  Complex patterns built from simple components
*/

/**
 * Button with icon - Common UI pattern
 * Uses flexible layout for proper alignment
 * Icon sizing adapts to button size
 */
.btn__icon {
  flex-shrink: 0;
  font-size: 1.2em;
}

.btn__text {
  flex: 1;
  text-align: left;
}

/* Icon-only buttons */
.btn--icon-only {
  padding: 0;
  width: var(--button-height-medium);
  aspect-ratio: 1;
}

.btn--icon-only.btn--small {
  width: var(--button-height-small);
}

.btn--icon-only.btn--large {
  width: var(--button-height-large);
}

/**
 * Floating Action Button (FAB)
 * Modern mobile-first pattern for primary actions
 */
.btn--fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-index-sticky);
  padding: 0;
}

.btn--fab:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

/*
  ==========================================
  7. BUTTON GROUP PATTERNS
  ==========================================
  Following Brad Traversy's component composition approach
*/

/**
 * Button group container
 * Creates seamless button combinations
 * Useful for toggle groups and related actions
 */
.btn-group {
  display: inline-flex;
  border-radius: var(--button-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.btn-group .btn {
  border-radius: 0;
  border-right-width: 1px;
  position: relative;
}

.btn-group .btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group .btn:first-child {
  border-radius: var(--button-radius) 0 0 var(--button-radius);
}

.btn-group .btn:last-child {
  border-radius: 0 var(--button-radius) var(--button-radius) 0;
  border-right-width: 2px;
}

.btn-group .btn:only-child {
  border-radius: var(--button-radius);
}

/* Active state in button groups */
.btn-group .btn--active {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
  z-index: 1;
}

/**
 * Vertical button group
 * Stack buttons vertically for mobile or sidebar layouts
 */
.btn-group--vertical {
  flex-direction: column;
}

.btn-group--vertical .btn {
  border-right-width: 2px;
  border-bottom-width: 1px;
}

.btn-group--vertical .btn:not(:last-child) {
  border-right: 2px solid;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group--vertical .btn:first-child {
  border-radius: var(--button-radius) var(--button-radius) 0 0;
}

.btn-group--vertical .btn:last-child {
  border-radius: 0 0 var(--button-radius) var(--button-radius);
  border-bottom-width: 2px;
}

/*
  ==========================================
  8. RESPONSIVE BEHAVIOR
  ==========================================
  Mobile-first responsive design principles
*/

/**
 * Mobile optimizations
 * Ensures buttons remain usable on all screen sizes
 * Follows touch-friendly interaction guidelines
 */
@media (max-width: 640px) {
  .btn {
    min-height: var(--button-height-large);
    padding: 0 var(--space-4);
    font-size: var(--font-size-base);
  }
  
  .btn--small {
    min-height: var(--button-height-medium);
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
  }
  
  .btn--large {
    min-height: 3.5rem;
    padding: 0 var(--space-8);
    font-size: var(--font-size-lg);
  }
  
  /* Full-width buttons on mobile */
  .btn--full-mobile {
    width: 100%;
    justify-content: center;
  }
  
  /* Stack button groups vertically on mobile */
  .btn-group--stack-mobile {
    flex-direction: column;
  }
  
  .btn-group--stack-mobile .btn {
    border-radius: var(--button-radius);
    border-right-width: 2px;
    margin-bottom: var(--space-2);
  }
  
  .btn-group--stack-mobile .btn:last-child {
    margin-bottom: 0;
  }
}

/*
  ==========================================
  9. ACCESSIBILITY ENHANCEMENTS
  ==========================================
  Following WCAG 2.1 guidelines and inclusive design
*/

/**
 * High contrast mode support
 * Ensures buttons remain visible in high contrast themes
 */
@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }
  
  .btn--ghost,
  .btn--outline {
    border-width: 3px;
  }
}

/**
 * Reduced motion support
 * Respects user preferences for minimal animation
 */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  
  .btn:hover {
    transform: none;
  }
  
  .btn--fab:hover {
    transform: none;
  }
  
  @keyframes btn-spin {
    0%, 100% { transform: rotate(0deg); }
  }
}

/**
 * Focus management for keyboard navigation
 * Ensures all interactive states are keyboard accessible
 */
.btn:focus-visible {
  z-index: 1;
}

.btn-group .btn:focus-visible {
  z-index: 2;
  position: relative;
}

/*
  ==========================================
  10. UTILITY CLASSES
  ==========================================
  Helper classes for common button modifications
*/

/**
 * Button width utilities
 * For responsive and layout-specific sizing
 */
.btn--full {
  width: 100%;
  justify-content: center;
}

.btn--auto {
  width: auto;
}

/**
 * Button alignment utilities
 * For text alignment within wider buttons
 */
.btn--text-left .btn__text {
  text-align: left;
}

.btn--text-center .btn__text {
  text-align: center;
}

.btn--text-right .btn__text {
  text-align: right;
}

/**
 * Button spacing utilities
 * For layout-specific margin control
 */
.btn--no-margin {
  margin: 0;
}

.btn--margin-right {
  margin-right: var(--space-3);
}

.btn--margin-bottom {
  margin-bottom: var(--space-3);
}

/*
  ==========================================
  BUTTON SYSTEM COMPLETE
  ==========================================
  
  This comprehensive button system demonstrates:
  ✅ Single Responsibility Principle - Each class has one clear purpose
  ✅ Open/Closed Principle - Extensible through variants, closed to modification
  ✅ Composition over Inheritance - Complex buttons built from simple base
  ✅ Progressive Enhancement - Works without JS, enhanced with it
  ✅ Educational Value - Code teaches principles while functioning
  ✅ Accessibility First - WCAG 2.1 compliant with keyboard navigation
  ✅ Mobile Optimized - Touch-friendly sizes and responsive behavior
  ✅ Semantic Variants - Educational cost indicators for learning context
  ✅ Performance Conscious - Efficient CSS with minimal specificity conflicts
  ✅ Maintainable Architecture - Uses design tokens for consistent theming
  
  Usage Examples:
  
  <!-- Basic buttons -->
  <button class="btn btn--primary">Primary Action</button>
  <button class="btn btn--secondary btn--large">Secondary Action</button>
  <button class="btn btn--ghost btn--small">Tertiary Action</button>
  
  <!-- Educational cost indicators -->
  <button class="btn btn--safe">Safe to Try</button>
  <button class="btn btn--expensive">Proceed with Caution</button>
  <button class="btn btn--critical">High Risk Action</button>
  
  <!-- With icons -->
  <button class="btn btn--primary">
    <span class="btn__icon">🚀</span>
    <span class="btn__text">Deploy</span>
  </button>
  
  <!-- Button groups -->
  <div class="btn-group">
    <button class="btn btn--outline">Option 1</button>
    <button class="btn btn--outline btn--active">Option 2</button>
    <button class="btn btn--outline">Option 3</button>
  </div>
  
  <!-- Loading state -->
  <button class="btn btn--primary btn--loading">Processing...</button>
  
  Following the collective wisdom of Kent C. Dodds, Robert C. Martin, and Brad Traversy:
  "Make it work, make it right, make it fast - and make it teach good practices."
*/