/**
 * EVENTRIPPLE DESIGN SYSTEM V2
 * Utility Classes for Common Patterns
 * File: 06-utilities.css
 */

/* Spacing utilities */
.mb-sm { margin-block-end: var(--space-sm); }
.mb-md { margin-block-end: var(--space-md); }
.mb-lg { margin-block-end: var(--space-lg); }
.mb-xl { margin-block-end: var(--space-xl); }

.mt-sm { margin-block-start: var(--space-sm); }
.mt-md { margin-block-start: var(--space-md); }
.mt-lg { margin-block-start: var(--space-lg); }
.mt-xl { margin-block-start: var(--space-xl); }

.pb-sm { padding-block-end: var(--space-sm); }
.pb-md { padding-block-end: var(--space-md); }
.pb-lg { padding-block-end: var(--space-lg); }

.pt-sm { padding-block-start: var(--space-sm); }
.pt-md { padding-block-start: var(--space-md); }
.pt-lg { padding-block-start: var(--space-lg); }

/* Text alignment */
.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }

/* Text colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-action { color: var(--color-action-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

/* Font weights */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Font sizes */
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }

/* Display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flex utilities */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Width utilities */
.w-full { inline-size: 100%; }
.w-auto { inline-size: auto; }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* State classes for JavaScript interaction */
.is-active {
  --state: active;
}

.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.is-loading {
  opacity: 0.6;
  cursor: wait;
}

.is-hidden {
  display: none;
}

.is-visible {
  display: block;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Layout Primitives */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stack--sm {
  gap: var(--space-sm);
}

.stack--lg {
  gap: var(--space-lg);
}

.stack--xl {
  gap: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.cluster--xs {
  gap: var(--space-xs);
}

.cluster--sm {
  gap: var(--space-sm);
}

.cluster--md {
  gap: var(--space-md);
}

.cluster--lg {
  gap: var(--space-lg);
}

.cluster--between {
  justify-content: space-between;
}

.cluster--center {
  justify-content: center;
}

.cluster--end {
  justify-content: flex-end;
}

/* =================================================================
   MOBILE SPACING UTILITIES - Override utilities
   ================================================================= */

@media (max-width: 768px) {
  /* Padding removal */
  .mobile\:p-0 { padding: 0 !important; }
  .mobile\:px-0 { padding-inline: 0 !important; }
  .mobile\:py-0 { padding-block: 0 !important; }

  /* Minimal padding */
  .mobile\:px-xs { padding-inline: var(--space-xs) !important; }
  .mobile\:px-sm { padding-inline: var(--space-sm) !important; }
  .mobile\:px-md { padding-inline: var(--space-md) !important; }

  .mobile\:py-xs { padding-block: var(--space-xs) !important; }
  .mobile\:py-sm { padding-block: var(--space-sm) !important; }
  .mobile\:py-md { padding-block: var(--space-md) !important; }

  /* Margin removal */
  .mobile\:m-0 { margin: 0 !important; }
  .mobile\:mx-0 { margin-inline: 0 !important; }
  .mobile\:my-0 { margin-block: 0 !important; }
}