/* Shared layout for Design System preview cards.
   Each card is ~700px wide; content shows directly, no titles. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fff; }
body {
  font-family: var(--tt-font-body);
  color: var(--tt-ink);
  padding: 22px 26px;
  -webkit-font-smoothing: antialiased;
}
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 14px; }
.muted { color: var(--tt-ink-3); font-size: 12px; }
.swatch {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px; min-height: 92px; flex: 1;
}
.swatch .name { font: 600 13px/1.2 var(--tt-font-display); }
.swatch .hex { font: 500 11px/1.3 var(--tt-font-body); opacity: 0.72; letter-spacing: 0.02em; }
.tag { font: 600 11px/1 var(--tt-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-ink-3); }