/**
 * Layout grid – fluid container, 12 columns, 24px gutters
 * Uses design tokens; responsive via tokens in design-tokens.css
 */

body {
  margin: 40px 0;
  font-family: var(--font-family-primary);
  background-color: var(--color-bg-container);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  transition: opacity 0.25s ease;
}

body.fonts-ready {
  opacity: 1;
}

/* Fluid container: full width with horizontal margins from tokens */
.layout-container {
  width: 100%;
  max-width: 100%;
  padding-inline: var(--container-margin);
  background-color: var(--color-bg-container);
  box-sizing: border-box;
}


/* 12-column grid; gutters from token (responsive) */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  width: 100%;
  box-sizing: border-box;
}

/* Column span utilities – span 1–12 columns */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Optional: start column for offsetting */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }