@import url('../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-bg-app); }
body {
  padding: 20px 24px;
  font-family: var(--font-sans);
  color: var(--color-text-main);
}

.card-surface {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }

.swatch {
  width: 100%;
  height: 56px;
  border-radius: var(--r-md);
  border: 1px solid rgba(0,0,0,0.04);
}
.swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; }
.swatch-name { font-size: 12px; font-weight: 600; color: var(--color-text-main); margin-top: 8px; }
.swatch-hex  { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: 0.02em; }

.token { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); }
.meta  { font-size: 11px; color: var(--color-text-muted); }