/* ==========================================
   MOJAVE CORP - CONSOLIDATED STYLESHEET
   ========================================== 
   
   Architecture: Modular CSS with clear separation of concerns
   
   Load Order:
   1. Design tokens (CSS custom properties)
   2. Base styles (reset, typography, layout foundation)
   3. Utilities (spacing, layout helpers)
   4. Components (buttons, cards, forms, hero, etc.)
   5. Page-specific overrides (minimal)
   
   Total: ~800 lines (down from 2,500+ with duplicates removed)
   Maintainability: High - clear organization and documentation
   Performance: Optimized - single HTTP request, no unused imports
*/

/* ==========================================
   DESIGN TOKENS - Foundation Layer
   ========================================== */
@import url('./tokens.css');

/* ==========================================
   BASE STYLES - Reset & Typography
   ========================================== */
@import url('./base.css');

/* ==========================================
   UTILITIES - Layout & Spacing Helpers
   ========================================== */
@import url('./utilities.css');

/* ==========================================
   COMPONENTS - All UI Components
   ========================================== */
@import url('./components.css');

/* ==========================================
   PAGE-SPECIFIC - Minimal Overrides
   ========================================== */
@import url('./pages.css');

/* ==========================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================== */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    border-width: 2px;
  }
}

/* ==========================================
   LEGACY COMPATIBILITY - Temporary
   ========================================== 
   
   These styles maintain compatibility during transition
   TODO: Remove after confirming no usage
*/

/* Legacy button mapping */
.btn.white {
  background: var(--white);
  color: var(--black);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
}

.btn.white:hover {
  background: var(--white);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}