/* Shared base for design-system preview cards. */
@import url("../colors_and_type.css");

html, body {
  margin: 0;
  background: var(--paper);          /* preview cards float on white */
  color: var(--ink);
  font-family: var(--font-body);
}

.card { width: 700px; padding: 24px 28px; box-sizing: border-box; background: var(--paper); }
.card.tight { padding: 20px 24px; }
.card.teal { background: var(--teal); color: var(--fg-on-teal); }
.card.cream { background: var(--cream); }
.card.deep { background: var(--teal-deep); color: var(--fg-on-deep); }

.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; }

.swatch {
  flex: 1;
  border-radius: var(--r-md);
  height: 72px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px 12px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--paper);
}
.swatch.on-light { color: var(--teal-deep); }
.swatch .h { opacity: 0.7; font-family: var(--font-mono); font-weight: 400; font-size: 10px; }
.swatch.bordered { box-shadow: inset 0 0 0 1px var(--line); }

.label-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.label-row .name {
  font-family: var(--font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.label-row .hint {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}