/* Shared card chrome — keep cards visually neutral so the swatches/specimens speak */
@import url('../colors_and_type.css');
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.card {
  padding: var(--sp-5) var(--sp-6);
  box-sizing: border-box;
}
.card.dark { background: var(--bg-dark-1); color: var(--fg-on-dark-1); }
.row { display: flex; gap: var(--sp-3); align-items: stretch; }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.swatch {
  flex: 1;
  min-height: 96px;
  border-radius: var(--r-4);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  border: 1px solid var(--border-1);
}
.swatch .name { font-weight: var(--fw-semibold); }
.swatch .hex { opacity: 0.7; font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }