/* Shared baseline for all design-system preview cards.
   Each preview is a ~700×N px card showing the swatch/specimen/token
   directly, no titles. The asset name renders OUTSIDE the card. */

@import url("../colors_and_type.css");

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-fg-1);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 700px;
  padding: 28px 32px;
  background: var(--c-bg);
  box-sizing: border-box;
}

.row { display: flex; align-items: center; gap: 16px; }
.stack { display: flex; flex-direction: column; }
.between { display: flex; justify-content: space-between; align-items: center; }

.label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-3);
  font-weight: 500;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--c-fg-3); }

.divider { height: 1px; background: var(--c-border-soft); margin: 20px 0; }