/* shared/design-system/responsive.css
   Responsive utilities and breakpoint helpers
*/

/* === Fluid Typography === */
:root {
  /* Fluid font sizes that scale with viewport */
  --fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --fluid-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
  --fluid-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
  --fluid-5xl: clamp(3rem, 2rem + 5vw, 4.5rem);
}

/* === Responsive Spacing === */
:root {
  --space-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --space-fluid-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-fluid-lg: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-fluid-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-fluid-2xl: clamp(3rem, 2rem + 5vw, 6rem);
}

/* === Responsive Container === */
.container-responsive {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-fluid-sm);
  padding-right: var(--space-fluid-sm);
}

@media (min-width: 640px) {
  .container-responsive {
    max-width: 640px;
    padding-left: var(--space-fluid-md);
    padding-right: var(--space-fluid-md);
  }
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container-responsive {
    max-width: 1100px;
  }
}

/* === Responsive Grid === */
.grid-responsive {
  display: grid;
  gap: var(--space-fluid-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-responsive-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-responsive-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-responsive-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-responsive-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* === Display Utilities === */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media (min-width: 640px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-grid { display: grid !important; }
}

@media (min-width: 1024px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-grid { display: grid !important; }
}

/* === Text Alignment === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

@media (min-width: 768px) {
  .text-md-left { text-align: left; }
  .text-md-center { text-align: center; }
  .text-md-right { text-align: right; }
}

/* === Flex Utilities === */
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

@media (min-width: 768px) {
  .flex-md-row { flex-direction: row; }
  .flex-md-column { flex-direction: column; }
}

/* === Spacing Utilities === */
/* Margin */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

/* Padding */
.p-0 { padding: 0 !important; }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-2xl { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.py-3xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.py-4xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }

.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

/* === Width Utilities === */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-xs { max-width: var(--max-width-xs); }
.max-w-sm { max-width: var(--max-width-sm); }
.max-w-md { max-width: var(--max-width-md); }
.max-w-lg { max-width: var(--max-width-lg); }
.max-w-xl { max-width: var(--max-width-xl); }
.max-w-2xl { max-width: var(--max-width-2xl); }
.max-w-3xl { max-width: var(--max-width-3xl); }
.max-w-4xl { max-width: var(--max-width-4xl); }
.max-w-full { max-width: 100%; }

/* === Responsive Text Sizes === */
.text-responsive-xs { font-size: var(--fluid-xs); }
.text-responsive-sm { font-size: var(--fluid-sm); }
.text-responsive-base { font-size: var(--fluid-base); }
.text-responsive-lg { font-size: var(--fluid-lg); }
.text-responsive-xl { font-size: var(--fluid-xl); }
.text-responsive-2xl { font-size: var(--fluid-2xl); }
.text-responsive-3xl { font-size: var(--fluid-3xl); }
.text-responsive-4xl { font-size: var(--fluid-4xl); }
.text-responsive-5xl { font-size: var(--fluid-5xl); }