/**
 * Visual Hierarchy System (Phase 3.1)
 * 
 * Standardized visual hierarchy for consistent emphasis, contrast,
 * whitespace, and call-to-action prominence across the application.
 * 
 * Usage:
 * - Use .visual-weight-* classes for font weight hierarchy
 * - Use .cta-* classes for call-to-action buttons
 * - Use .section-spacing-* for section padding
 * - Use .content-gap-* for content separation
 */

@import url('design-system.css');

/* ============================================
   VISUAL WEIGHT SYSTEM
   ============================================
   
   Font weight hierarchy for clear visual distinction.
 */

.visual-weight-primary {
  font-weight: var(--visual-weight-primary) !important;  /* 700 - Bold */
}

.visual-weight-secondary {
  font-weight: var(--visual-weight-secondary) !important;  /* 600 - Semibold */
}

.visual-weight-tertiary {
  font-weight: var(--visual-weight-tertiary) !important;  /* 500 - Medium */
}

.visual-weight-normal {
  font-weight: var(--visual-weight-normal) !important;  /* 400 - Normal */
}

/* ============================================
   CTA (CALL-TO-ACTION) ENHANCEMENT
   ============================================
   
   Enhanced CTAs with proper sizing, padding, and prominence.
 */

.cta-primary {
  font-size: var(--cta-primary-size-mobile) !important;
  font-weight: var(--visual-weight-primary) !important;
  padding: var(--cta-primary-padding-y-mobile) var(--cta-primary-padding-x-mobile) !important;
  box-shadow: var(--shadow-emphasis-cta) !important;
  transition: transform var(--animation-cta-hover) ease-out,
              box-shadow var(--animation-cta-hover) ease-out !important;
}

@media (min-width: 640px) {
  .cta-primary {
    font-size: var(--cta-primary-size) !important;
    padding: var(--cta-primary-padding-y) var(--cta-primary-padding-x) !important;
  }
}

.cta-primary:hover {
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 15px 35px rgba(22, 163, 74, 0.3), 0 5px 15px rgba(22, 163, 74, 0.2) !important;
}

.cta-primary:active {
  transform: scale(1.02) translateY(0) !important;
  transition-duration: var(--animation-cta-active) !important;
}

.cta-secondary {
  font-size: var(--cta-secondary-size-mobile) !important;
  font-weight: var(--visual-weight-secondary) !important;
  padding: var(--cta-secondary-padding-y) var(--cta-secondary-padding-x) !important;
  box-shadow: var(--shadow-emphasis-medium) !important;
  transition: transform var(--animation-cta-hover) ease-out,
              box-shadow var(--animation-cta-hover) ease-out !important;
}

@media (min-width: 640px) {
  .cta-secondary {
    font-size: var(--cta-secondary-size) !important;
  }
}

.cta-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-emphasis-high) !important;
}

.cta-tertiary {
  font-size: var(--cta-tertiary-size) !important;
  font-weight: var(--visual-weight-tertiary) !important;
  padding: var(--cta-tertiary-padding-y) var(--cta-tertiary-padding-x) !important;
  transition: opacity var(--animation-cta-hover) ease-out !important;
}

.cta-tertiary:hover {
  opacity: 0.8 !important;
}

/* ============================================
   SECTION SPACING (WHITESPACE)
   ============================================
   
   Consistent section padding for better breathing room.
 */

.section-spacing-xs {
  padding-top: var(--section-spacing-xs-mobile) !important;
  padding-bottom: var(--section-spacing-xs-mobile) !important;
}

@media (min-width: 768px) {
  .section-spacing-xs {
    padding-top: var(--section-spacing-xs) !important;
    padding-bottom: var(--section-spacing-xs) !important;
  }
}

.section-spacing-sm {
  padding-top: var(--section-spacing-sm-mobile) !important;
  padding-bottom: var(--section-spacing-sm-mobile) !important;
}

@media (min-width: 768px) {
  .section-spacing-sm {
    padding-top: var(--section-spacing-sm) !important;
    padding-bottom: var(--section-spacing-sm) !important;
  }
}

.section-spacing-md {
  padding-top: var(--section-spacing-md-mobile) !important;
  padding-bottom: var(--section-spacing-md-mobile) !important;
}

@media (min-width: 768px) {
  .section-spacing-md {
    padding-top: var(--section-spacing-md) !important;
    padding-bottom: var(--section-spacing-md) !important;
  }
}

.section-spacing-lg {
  padding-top: var(--section-spacing-lg-mobile) !important;
  padding-bottom: var(--section-spacing-lg-mobile) !important;
}

@media (min-width: 768px) {
  .section-spacing-lg {
    padding-top: var(--section-spacing-lg) !important;
    padding-bottom: var(--section-spacing-lg) !important;
  }
}

.section-spacing-xl {
  padding-top: var(--section-spacing-xl-mobile) !important;
  padding-bottom: var(--section-spacing-xl-mobile) !important;
}

@media (min-width: 768px) {
  .section-spacing-xl {
    padding-top: var(--section-spacing-xl) !important;
    padding-bottom: var(--section-spacing-xl) !important;
  }
}

/* Top/Bottom only variants */
.section-spacing-top-xs { padding-top: var(--section-spacing-xs-mobile) !important; }
.section-spacing-top-sm { padding-top: var(--section-spacing-sm-mobile) !important; }
.section-spacing-top-md { padding-top: var(--section-spacing-md-mobile) !important; }
.section-spacing-top-lg { padding-top: var(--section-spacing-lg-mobile) !important; }
.section-spacing-top-xl { padding-top: var(--section-spacing-xl-mobile) !important; }

.section-spacing-bottom-xs { padding-bottom: var(--section-spacing-xs-mobile) !important; }
.section-spacing-bottom-sm { padding-bottom: var(--section-spacing-sm-mobile) !important; }
.section-spacing-bottom-md { padding-bottom: var(--section-spacing-md-mobile) !important; }
.section-spacing-bottom-lg { padding-bottom: var(--section-spacing-lg-mobile) !important; }
.section-spacing-bottom-xl { padding-bottom: var(--section-spacing-xl-mobile) !important; }

@media (min-width: 768px) {
  .section-spacing-top-xs { padding-top: var(--section-spacing-xs) !important; }
  .section-spacing-top-sm { padding-top: var(--section-spacing-sm) !important; }
  .section-spacing-top-md { padding-top: var(--section-spacing-md) !important; }
  .section-spacing-top-lg { padding-top: var(--section-spacing-lg) !important; }
  .section-spacing-top-xl { padding-top: var(--section-spacing-xl) !important; }
  
  .section-spacing-bottom-xs { padding-bottom: var(--section-spacing-xs) !important; }
  .section-spacing-bottom-sm { padding-bottom: var(--section-spacing-sm) !important; }
  .section-spacing-bottom-md { padding-bottom: var(--section-spacing-md) !important; }
  .section-spacing-bottom-lg { padding-bottom: var(--section-spacing-lg) !important; }
  .section-spacing-bottom-xl { padding-bottom: var(--section-spacing-xl) !important; }
}

/* ============================================
   CONTENT GAP (SEPARATION)
   ============================================
   
   Consistent gaps between related content elements.
 */

.content-gap-sm {
  gap: var(--content-gap-sm) !important;
}

.content-gap-md {
  gap: var(--content-gap-md) !important;
}

.content-gap-lg {
  gap: var(--content-gap-lg) !important;
}

.content-gap-xl {
  gap: var(--content-gap-xl) !important;
}

/* ============================================
   VISUAL EMPHASIS (SCALE)
   ============================================
   
   Scale-based emphasis for important elements.
 */

.emphasis-high {
  transform: scale(var(--emphasis-high)) !important;
}

.emphasis-medium {
  transform: scale(var(--emphasis-medium)) !important;
}

.emphasis-low {
  transform: scale(var(--emphasis-low)) !important;
}

/* ============================================
   SHADOW HIERARCHY
   ============================================
   
   Depth-based shadows for visual layering.
 */

.shadow-emphasis-low {
  box-shadow: var(--shadow-emphasis-low) !important;
}

.shadow-emphasis-medium {
  box-shadow: var(--shadow-emphasis-medium) !important;
}

.shadow-emphasis-high {
  box-shadow: var(--shadow-emphasis-high) !important;
}

.shadow-emphasis-cta {
  box-shadow: var(--shadow-emphasis-cta) !important;
}

/* ============================================
   CONTRAST ENHANCEMENT
   ============================================
   
   High contrast utilities for accessibility.
 */

.text-contrast-high {
  color: var(--color-neutral-900) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.text-contrast-dark {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================
   
   Respect reduced motion preferences.
 */

@media (prefers-reduced-motion: reduce) {
  .cta-primary,
  .cta-secondary,
  .cta-tertiary {
    transition: none !important;
  }
  
  .cta-primary:hover,
  .cta-secondary:hover {
    transform: none !important;
  }
  
  .emphasis-high,
  .emphasis-medium,
  .emphasis-low {
    transform: none !important;
  }
}