/* Shared styling for design-system preview cards.
   Every card is ~700px wide; height varies.
   Tokens come from /css/variables.css — loaded by the HTML, not imported here. */

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
}

.card {
  box-sizing: border-box;
  width: 700px;
  padding: 24px 28px;
  background: var(--paper);
}

.card.flush  { padding: 0; }
.card.grid   {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 12px 12px;
}

/* Micro-labels shared across cards */
.lab {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mono { font-family: var(--font-mono); font-size: 12px; }

.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.w-full { width: 100%; }