/* Shared card chrome for preview/ files. Keep cards minimal — no titles. */
@import url("../colors_and_type.css");
html, body { height: 100%; }
body {
  margin: 0;
  padding: 20px;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: stretch;
  box-sizing: border-box;
}
* { box-sizing: border-box; }
.card { width: 100%; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.swatch { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.swatch__chip { height: 56px; border-radius: 8px; border: 1px solid var(--border); }
.swatch__name { font: var(--weight-medium) 11px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--foreground); text-transform: lowercase; }
.swatch__hex { font: var(--weight-regular) 10px/1 var(--font-mono); color: var(--muted-foreground); }
.muted { color: var(--muted-foreground); }
.label-mono { font: var(--weight-medium) 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }