/* Shared reset for preview cards. 700px design width. */
@import url('../colors_and_type.css');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 700px;
  background: var(--bg-canvas);
  color: var(--fg-primary);
  overflow: hidden;
}

body {
  padding: 28px;
  font-family: var(--font-body);
  font-size: 14px;
  position: relative;
}

body.on-dark {
  background: var(--ink-1000);
  color: var(--cream-100);
}

.card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-tertiary);
  margin-bottom: 4px;
}

.on-dark .card-label { color: var(--ink-400); }

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

.swatch {
  border-radius: 2px;
  border: 1px solid rgba(14,14,16,0.06);
}

.on-dark .swatch {
  border-color: rgba(255,255,255,0.08);
}

.token-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-tertiary);
  letter-spacing: 0.02em;
}

.token-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-primary);
}

.on-dark .token-name { color: var(--cream-100); }
.on-dark .token-label { color: var(--ink-400); }