/**
 * Mobile Scaling v2.0
 * Responsive scaling system for optimal mobile experience
 */

/* ==================== Base Scaling ==================== */
:root {
  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Font scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  
  /* Component scale */
  --button-height: 44px;
  --input-height: 48px;
  --header-height: 60px;
  --sidebar-width: 280px;
}

/* ==================== Small Mobile (<375px) ==================== */
@media screen and (max-width: 374px) {
  :root {
    --space-xs: 3px;
    --space-sm: 6px;
    --space-md: 12px;
    --space-lg: 18px;
    --space-xl: 24px;
    --space-2xl: 36px;
    
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 19px;
    --text-2xl: 22px;
    --text-3xl: 26px;
    
    --button-height: 40px;
    --input-height: 44px;
    --header-height: 52px;
  }
}

/* ==================== Standard Mobile (375px-424px) ==================== */
@media screen and (min-width: 375px) and (max-width: 424px) {
  :root {
    --space-md: 14px;
    --space-lg: 20px;
    --space-xl: 28px;
    
    --text-base: 15px;
    --header-height: 56px;
  }
}

/* ==================== Large Mobile (425px-767px) ==================== */
@media screen and (min-width: 425px) and (max-width: 767px) {
  :root {
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    --button-height: 48px;
    --header-height: 60px;
  }
}

/* ==================== Tablet (768px-1023px) ==================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --sidebar-width: 260px;
    --header-height: 64px;
    --button-height: 46px;
  }
}

/* ==================== Scaled Components ==================== */
.scaled-button {
  height: var(--button-height);
  padding: 0 var(--space-lg);
  font-size: var(--text-sm);
  border-radius: calc(var(--button-height) / 4);
}

.scaled-input {
  height: var(--input-height);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  border-radius: calc(var(--input-height) / 4);
}

.scaled-card {
  padding: var(--space-md);
  border-radius: var(--space-md);
}

.scaled-header {
  height: var(--header-height);
  padding: 0 var(--space-md);
}

/* ==================== Scaled Spacing ==================== */
.scaled-gap-xs { gap: var(--space-xs); }
.scaled-gap-sm { gap: var(--space-sm); }
.scaled-gap-md { gap: var(--space-md); }
.scaled-gap-lg { gap: var(--space-lg); }
.scaled-gap-xl { gap: var(--space-xl); }

.scaled-p-xs { padding: var(--space-xs); }
.scaled-p-sm { padding: var(--space-sm); }
.scaled-p-md { padding: var(--space-md); }
.scaled-p-lg { padding: var(--space-lg); }
.scaled-p-xl { padding: var(--space-xl); }

.scaled-m-xs { margin: var(--space-xs); }
.scaled-m-sm { margin: var(--space-sm); }
.scaled-m-md { margin: var(--space-md); }
.scaled-m-lg { margin: var(--space-lg); }
.scaled-m-xl { margin: var(--space-xl); }

/* ==================== Scaled Typography ==================== */
.scaled-text-xs { font-size: var(--text-xs); }
.scaled-text-sm { font-size: var(--text-sm); }
.scaled-text-base { font-size: var(--text-base); }
.scaled-text-lg { font-size: var(--text-lg); }
.scaled-text-xl { font-size: var(--text-xl); }
.scaled-text-2xl { font-size: var(--text-2xl); }
.scaled-text-3xl { font-size: var(--text-3xl); }

/* ==================== Touch Scaling ==================== */
.scaled-touch {
  min-height: var(--button-height);
  min-width: var(--button-height);
}

.scaled-touch-lg {
  min-height: var(--input-height);
  min-width: var(--input-height);
}

/* ==================== Icon Scaling ==================== */
.scaled-icon-sm {
  width: 16px;
  height: 16px;
}

.scaled-icon-md {
  width: 20px;
  height: 20px;
}

.scaled-icon-lg {
  width: 24px;
  height: 24px;
}

@media screen and (max-width: 374px) {
  .scaled-icon-sm { width: 14px; height: 14px; }
  .scaled-icon-md { width: 18px; height: 18px; }
  .scaled-icon-lg { width: 22px; height: 22px; }
}

/* ==================== Responsive Breakpoint Classes ==================== */
.scale-up-sm {
  transform: scale(1);
}

@media screen and (min-width: 375px) {
  .scale-up-sm {
    transform: scale(1.05);
  }
}

.scale-down-mobile {
  transform: scale(1);
}

@media screen and (max-width: 374px) {
  .scale-down-mobile {
    transform: scale(0.95);
  }
}