/* ============================================================
   DESIGN SYSTEM — LAYOUT
   ============================================================ */

.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.ds-header__left, .ds-header__right, .ds-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ds-header-actions {
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* SECTIONS */
.ds-section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.ds-section:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.ds-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-5) 0;
  border: none;
}

/* CONTAINERS */
.ds-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.ds-container--narrow {
  max-width: 720px;
}

/* GRID SYSTEM */
.ds-grid {
  display: grid;
  gap: var(--space-4);
}

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

@media (max-width: 1024px) {
  .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ds-grid-3, .ds-grid-2 { grid-template-columns: 1fr; }
}

/* STACK & GROUPS */
.ds-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.ds-stack-sm { gap: var(--space-3); }
.ds-stack-lg { gap: var(--space-6); }

.ds-group { display: flex; align-items: center; gap: var(--space-3); }
.ds-group-wrap { flex-wrap: wrap; }

/* ALIGNMENT */
.ds-center { display: flex; align-items: center; justify-content: center; }
.ds-between { display: flex; justify-content: space-between; align-items: center; }

/* SPACING */
.ds-separator-sm { margin: var(--space-3) 0; }
.ds-separator-md { margin: var(--space-5) 0; }
.ds-separator-lg { margin: var(--space-8) 0; }