@import url('../colors_and_type.css');
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ds-white); color: var(--ds-black); font-family: var(--ds-sans); }
body { padding: 24px; }
.card { background: var(--ds-white); }
.card.dark { background: var(--ds-black); color: var(--ds-fg-on-dark); }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.swatch {
  display: flex; flex-direction: column; gap: 6px;
}
.swatch .chip {
  width: 100%; height: 72px; border: 1px solid var(--ds-gray-lt);
}
.swatch .chip.nb { border: 0; }
.swatch .name {
  font-family: var(--ds-sans); font-size: 11px; font-weight: 500; color: var(--ds-black); letter-spacing: 0.02em;
}
.swatch .hex {
  font-family: var(--ds-mono); font-size: 10px; color: var(--ds-gray); letter-spacing: 0.02em;
}