/* Preview card shared base — every card includes colors_and_type.css + this */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #FAFAFA;
}
.card {
  width: 700px;
  padding: 28px 32px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--fg-1);
}
.card--paper    { background: var(--gainsboro-100); }
.card--gainsboro{ background: var(--gainsboro-400); }
.card--ink      { background: var(--charcoal-700); color: var(--fg-on-ink); }
.card--deep     { background: var(--rich-700); color: var(--fg-on-ink); }
.card--bone     { background: var(--bone-400); }

.row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.row--tight { gap: 4px; }
.col {
  display: flex;
  flex-direction: column;
}
.spread {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hair { height: 1px; background: var(--line-1); width: 100%; }
.hair--strong { background: var(--line-2); }
.hair--ink { background: var(--line-on-ink); }

/* swatch */
.sw {
  position: relative;
  border-radius: 0;
  overflow: hidden;
}
.sw__hex {
  position: absolute; left: 10px; bottom: 8px;
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  color: var(--fg-on-ink);
}
.sw__hex--dark { color: var(--charcoal-700); }
.sw__name {
  position: absolute; left: 10px; top: 8px;
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-on-ink);
}
.sw__name--dark { color: var(--charcoal-700); }