/* preview/card.css — shared shell for Design System cards.
   Cards are ~700px wide, charcoal stage, minimal chrome. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--stage, #0a0a0a);
  color: var(--fg1, #e8e8e8);
  font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
  padding: 22px 24px;
  -webkit-font-smoothing: antialiased;
}
.card-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
.card-col { display: flex; flex-direction: column; gap: 14px; }
.swatch {
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--line, #222);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 84px;
  position: relative;
  overflow: hidden;
}
.swatch .meta {
  font-family: var(--font-code, 'IBM Plex Mono', monospace);
  font-size: 11px;
  line-height: 1.45;
}
.swatch .name { color: inherit; font-weight: 600; letter-spacing: .02em; }
.swatch .hex { opacity: .7; }
.lbl {
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg2, #888);
}