/* Shared styles for design-system preview cards. Target ~700×Xpx. */
@import url('../colors_and_type.css');

html, body {
  margin: 0;
  padding: 0;
  background: #FFFCF7;
  color: var(--fg1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.card {
  padding: 28px 32px;
  box-sizing: border-box;
  width: 700px;
}

.row { display: flex; gap: 10px; align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 10px; }
.label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); font-weight: 500; }
.meta  { font-size: 12px; color: var(--fg2); font-family: var(--font-mono, ui-monospace, Menlo); }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }