/**
 * Centralized Breakpoint System - Mobile First
 * Defines consistent breakpoints across the entire application
 */

:root {
  /* Breakpoint values */
  --mobile: 320px;
  --tablet: 768px;
  --desktop: 1024px;
  --large: 1440px;
  
  /* Mobile-first media queries */
  --mobile-up: (min-width: 320px);
  --tablet-up: (min-width: 768px);
  --desktop-up: (min-width: 1024px);
  --large-up: (min-width: 1440px);
  
  /* Max-width media queries for specific cases */
  --mobile-only: (max-width: 767px);
  --tablet-only: (min-width: 768px) and (max-width: 1023px);
  --desktop-only: (min-width: 1024px) and (max-width: 1439px);
}

/* Mobile-first base styles (320px+) */
@media (min-width: 320px) {
  :root {
    --modal-padding: 8px;
    --modal-border-radius: 0px;
    --modal-header-padding: 16px;
    --modal-body-padding: 16px;
    --modal-footer-padding: 16px;
    --form-gap: 16px;
    --button-gap: 12px;
    --card-gap: 16px;
    --grid-columns: 1;
  }
}

/* Tablet styles (768px+) */
@media (min-width: 768px) {
  :root {
    --modal-padding: 20px;
    --modal-border-radius: 16px;
    --modal-header-padding: 24px;
    --modal-body-padding: 24px;
    --modal-footer-padding: 24px;
    --form-gap: 20px;
    --button-gap: 16px;
    --card-gap: 20px;
    --grid-columns: 2;
  }
}

/* Desktop styles (1024px+) */
@media (min-width: 1024px) {
  :root {
    --modal-padding: 24px;
    --modal-border-radius: 20px;
    --modal-header-padding: 32px;
    --modal-body-padding: 32px;
    --modal-footer-padding: 32px;
    --form-gap: 24px;
    --button-gap: 20px;
    --card-gap: 24px;
    --grid-columns: 2;
  }
}

/* Large desktop styles (1440px+) */
@media (min-width: 1440px) {
  :root {
    --modal-padding: 32px;
    --modal-border-radius: 24px;
    --modal-header-padding: 40px;
    --modal-body-padding: 40px;
    --modal-footer-padding: 40px;
    --form-gap: 28px;
    --button-gap: 24px;
    --card-gap: 28px;
    --grid-columns: 2;
  }
}

/* Utility classes for responsive visibility */
.mobile-only {
  display: block;
}

.tablet-up {
  display: none;
}

.desktop-up {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .tablet-up {
    display: block;
  }
}

@media (min-width: 1024px) {
  .tablet-up {
    display: none;
  }
  
  .desktop-up {
    display: block;
  }
}

/* Responsive text sizing */
.text-responsive {
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .text-responsive {
    font-size: 16px;
    line-height: 1.5;
  }
}

@media (min-width: 1024px) {
  .text-responsive {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Responsive spacing utilities */
.spacing-responsive {
  padding: var(--modal-padding);
  gap: var(--form-gap);
}

/* Touch-friendly sizing for mobile */
@media (max-width: 767px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
  
  .touch-friendly {
    padding: 12px 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}