/* Layout CSS - 通用布局 */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg-white);
}

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

@media (max-width: 1439px) {
  .container {
    max-width: 1200px;
    padding: 0 40px;
  }
}

.section {
  padding: 45px 0;
}

.section--gray {
  background-color: var(--color-bg);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: #FFFFFF;
}

/* 栅格 */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Flex 工具 */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--column { flex-direction: column; }
.flex--gap-sm { gap: var(--space-3); }
.flex--gap-md { gap: var(--space-6); }
.flex--gap-lg { gap: var(--space-16); }