/* ============================================================
   LAYOUT — WRAPPERS, STRUCTURE, UTILITIES
   ============================================================ */

/* --------------------------------------
   GLOBAL WRAPPERS
-----------------------------------------*/

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: var(--font-2xl);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------
   FLEX UTILITIES
-----------------------------------------*/

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* --------------------------------------
   GRID UTILITIES
-----------------------------------------*/

.grid {
  display: grid;
}

.grid-auto {
  display: grid;
  grid-auto-flow: column;
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------
   SPACING UTILITIES
-----------------------------------------*/

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.pl-4 { padding-left: var(--space-4); }
.pr-4 { padding-right: var(--space-4); }

/* --------------------------------------
   SURFACE UTILITIES
-----------------------------------------*/

.surface {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.surface-sm {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

/* --------------------------------------
   TEXT UTILITIES
-----------------------------------------*/

.text-muted {
  color: var(--color-text-muted);
}

.text-light {
  color: var(--color-text-light);
}

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

/* --------------------------------------
   WIDTH / HEIGHT UTILITIES
-----------------------------------------*/

.w-full { width: 100%; }
.h-full { height: 100%; }

.max-w-sm { max-width: 380px; }
.max-w-md { max-width: 520px; }
.max-w-lg { max-width: 720px; }

/* --------------------------------------
   BORDERS
-----------------------------------------*/

.border {
  border: 1px solid var(--color-border);
}

.border-light {
  border: 1px solid var(--color-border-light);
}

.border-dark {
  border: 1px solid var(--color-border-dark);
}

/* --------------------------------------
   RADIUS UTILITIES
-----------------------------------------*/

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

/* --------------------------------------
   SHADOW UTILITIES
-----------------------------------------*/

.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }
.shadow-4 { box-shadow: var(--shadow-4); }

/* --------------------------------------
   VISIBILITY
-----------------------------------------*/

.hidden { display: none !important; }