/* shared styles for preview cards
   Each card is ~700px wide. Body has no margin so cards render flush. */
@import url("../colors_and_type.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");

html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
body {
  padding: 24px;
  font-size: 14px;
}
.card-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 12px; }
.swatch {
  border-radius: 6px;
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 10px 12px;
  min-height: 84px;
  position: relative;
}
.swatch .name { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.swatch .hex  { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.7; }
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; }
.specimen { font-family: var(--font-display); color: var(--ink); }
.specimen em { font-style: italic; color: var(--sage); }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }

/* paper-grain texture for cards that want it */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(58, 46, 30, 0.025) 1px, transparent 1px),
    radial-gradient(rgba(58, 46, 30, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 13px 13px;
  background-position: 0 0, 6px 7px;
}