/**
 * Layout CSS — Structure, Grid, Flex utilities
 */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

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

/* Grid */
.grid          { display: grid; }
.grid-auto     { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Spacing helpers */
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }
.mb-md  { margin-bottom: var(--sp-md); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.mb-xl  { margin-bottom: var(--sp-xl); }

/* Text */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-primary { color: var(--text-primary); }
.text-muted   { color: var(--text-muted); }
.text-accent  { color: var(--accent-bright); }

/* Display */
.hidden       { display: none; }
.block        { display: block; }
.w-full       { width: 100%; }

/* Sections */
section { margin-bottom: var(--sp-3xl); }
section:last-child { margin-bottom: 0; }

main { padding: var(--sp-2xl) 0 var(--sp-3xl); }