/* Shared shell for preview cards. Cards are 700×variable, dark canvas. */
@import url("../colors_and_type.css");

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  width: 700px;
  overflow: hidden;
}

.card {
  width: 700px;
  padding: 24px;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
}

.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: 20px; } .gap-6 { gap: 24px; }

.swatch {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.04);
}
.swatch-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.swatch-name {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-0);
  font-weight: 500;
}
.muted {
  color: var(--fg-3);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}