/* ==========================================================================
   GLOBAL LAYOUT & TYPOGRAPHY STYLES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  position: relative;
}

.section-sm {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section-lg {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.bg-ivory { background-color: var(--color-bg-ivory); }
.bg-surface { background-color: var(--color-bg-surface); }
.bg-muted { background-color: var(--color-bg-muted); }
.bg-dark { background-color: var(--color-bg-dark); color: var(--color-text-inverse); }

/* Typography Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.font-script { font-family: var(--font-script); }

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

.highlight-accent {
  color: var(--color-accent);
  display: inline-block;
  position: relative;
}

/* Dual tone headline */
.headline-lg {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.headline-md {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.headline-sm {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.3;
}

/* Section Header Bar */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header.text-center {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.section-tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-tagline::before {
  content: "—";
  font-weight: 800;
}

.section-description {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: var(--space-3);
}

.bg-dark .section-description {
  color: var(--color-text-inverse-muted);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
  color: var(--color-text-inverse);
}

/* Grid System */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Flex Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }