/* Shared frame for design-system preview cards.
   Cards are ~700×<varies> with 24–32px padding and a white surface. */
@import url("../colors_and_type.css");

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--sb-grey-600);
  font-family: var(--sb-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.card {
  padding: 28px 32px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.row { display: flex; flex-direction: row; gap: 16px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 12px; }
.eyebrow {
  font: 500 12px/1 var(--sb-font-sans);
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--sb-black);
  opacity: 0.4;
}
.divider { height: 1px; background: rgba(0,0,0,0.08); width: 100%; }
.swatch {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.swatch .chip {
  width: 56px; height: 56px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.swatch .name { font: 500 11px/1.2 var(--sb-font-sans); letter-spacing: -0.02em; color: var(--sb-grey-600); }
.swatch .hex  { font: 400 10px/1.2 var(--sb-font-sans); color: var(--sb-grey-400); }