/**
 * Website Factory — Utility Classes
 * Layout, spacing, text, and visibility utilities.
 * All values reference design tokens (CSS custom properties).
 */

/* ========================================
   LAYOUT
   ======================================== */

.container {
  width: 100%;
  max-width: var(--container-xl, 1200px);
  margin: 0 auto;
  padding-left: var(--spacing-scale-md, 1rem);
  padding-right: var(--spacing-scale-md, 1rem);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--spacing-scale-xl, 2rem);
    padding-right: var(--spacing-scale-xl, 2rem);
  }
}

.container-narrow { max-width: var(--container-lg, 1024px); }
.container-wide   { max-width: var(--container-2xl, 1400px); }

/* Sections */
.section {
  padding-top: var(--spacing-sectionMobile, 3rem);
  padding-bottom: var(--spacing-sectionMobile, 3rem);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--spacing-sectionTablet, 4rem);
    padding-bottom: var(--spacing-sectionTablet, 4rem);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--spacing-sectionDesktop, 6rem);
    padding-bottom: var(--spacing-sectionDesktop, 6rem);
  }
}

/* Grid */
.grid { display: grid; gap: var(--spacing-scale-lg, 1.5rem); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: 1fr; }
}

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

/* Flexbox */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

/* Gap */
.gap-xs  { gap: var(--spacing-scale-xs, 0.25rem); }
.gap-sm  { gap: var(--spacing-scale-sm, 0.5rem); }
.gap-md  { gap: var(--spacing-scale-md, 1rem); }
.gap-lg  { gap: var(--spacing-scale-lg, 1.5rem); }
.gap-xl  { gap: var(--spacing-scale-xl, 2rem); }
.gap-2xl { gap: var(--spacing-scale-2xl, 3rem); }

/* ========================================
   SPACING
   ======================================== */

.mt-auto { margin-top: auto; }
.mt-0   { margin-top: 0; }
.mt-sm  { margin-top: var(--spacing-scale-sm, 0.5rem); }
.mt-md  { margin-top: var(--spacing-scale-md, 1rem); }
.mt-lg  { margin-top: var(--spacing-scale-lg, 1.5rem); }
.mt-xl  { margin-top: var(--spacing-scale-xl, 2rem); }
.mt-2xl { margin-top: var(--spacing-scale-2xl, 3rem); }

.mb-0   { margin-bottom: 0; }
.mb-sm  { margin-bottom: var(--spacing-scale-sm, 0.5rem); }
.mb-md  { margin-bottom: var(--spacing-scale-md, 1rem); }
.mb-lg  { margin-bottom: var(--spacing-scale-lg, 1.5rem); }
.mb-xl  { margin-bottom: var(--spacing-scale-xl, 2rem); }
.mb-2xl { margin-bottom: var(--spacing-scale-2xl, 3rem); }

/* ========================================
   TEXT
   ======================================== */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-muted { color: var(--colors-text-muted); }
.text-mono  { font-family: var(--typography-fonts-mono-family); }
.lead       { font-size: var(--typography-scale-sizes-lg); line-height: var(--typography-lineHeights-relaxed); }

.text-xs { font-size: var(--typography-scale-sizes-xs); }
.text-sm { font-size: var(--typography-scale-sizes-sm); }
.text-lg { font-size: var(--typography-scale-sizes-lg); }
.text-xl { font-size: var(--typography-scale-sizes-xl); }

/* ========================================
   VISIBILITY
   ======================================== */

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}