/* U12: Designsystem page — layout only; every sample reuses real component
   classes so the page is U1's regression canary. */

.ds-section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-faint);
}
.ds-section:last-child { border-bottom: none; }

.ds-section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-ghost);
  font-weight: 600;
}

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

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.ds-swatch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
}
.ds-swatch-chip { height: 40px; border-radius: var(--radius); border: 1px solid var(--border-strong); }
/* 2026-07-26: the grid is generated from tokens.css, which also carries
   non-colour tokens (radii, spacing, type). Those get their literal value
   instead of an empty square. */
.ds-swatch-chip--value {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-chip);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  overflow: hidden;
  padding: 0 var(--space-1);
}
.ds-group-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.ds-note { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.ds-swatch-name { font-size: var(--text-md); font-weight: 500; }
.ds-swatch-var { font-size: var(--text-2xs); color: var(--text-faint); }

.ds-type { display: flex; flex-direction: column; gap: var(--space-3); }

.ds-radius {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 56px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}