/* Shared styles for design-system preview cards */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #334155;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.card {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }

.swatch {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15,42,81,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 12px;
  color: #fff;
}
.swatch.dark-text { color: #081A4F; }
.swatch .name { font-weight: 600; font-size: 12px; letter-spacing: -0.01em; }
.swatch .hex { font-size: 11px; font-family: ui-monospace, Menlo, monospace; opacity: .85; }

.label { font-size: 11px; color: #64748B; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }