/* Shared chrome for every preview card in /preview/.
   Cards are sized to ~700×<n> and contain no titles — the asset
   name appears outside the card in the Design System tab. */
@import url('../colors_and_type.css');

html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--color-fg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.card {
  width: 700px;
  padding: 28px;
  box-sizing: border-box;
  background: #FFFFFF;
}
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-5 { gap: 24px; } .gap-6 { gap: 32px; } .gap-7 { gap: 40px; }
.center { align-items: center; }
.between { justify-content: space-between; }
.muted { color: var(--color-fg-2); }
.mono  { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; }
.label-xs {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-fg-2);
}