/* Shared base for design-system preview cards.
   Cards render in ~700×variable iframes; keep visuals dense but breathable. */
@import url("../colors_and_type.css");

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
body {
  padding: 24px;
}
.card-row { display: flex; gap: 12px; align-items: stretch; }
.card-col { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}
.label-cap {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}