/* /styleguide presentation helpers — page-scoped (.sg-*), tokens only. The
 * components on display come from app.css untouched; this sheet only lays
 * out the specimen cases around them. */

.sg-section {
  margin-top: var(--sp-7);
}
.sg-section > h2 {
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.sg-note {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.sg-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* token swatches (backgrounds painted by the page script from data-var) */
.sg-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.sg-swatch {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.sg-swatch-chip {
  display: block;
  height: 56px;
}
.sg-swatch figcaption {
  padding: var(--sp-2) var(--sp-3);
  font: var(--fs-xs) / 1.4 var(--font-mono);
  color: var(--text-dim);
}

/* type scale */
.sg-fs-xs { font-size: var(--fs-xs); }
.sg-fs-sm { font-size: var(--fs-sm); }
.sg-fs-base { font-size: var(--fs-base); }
.sg-fs-md { font-size: var(--fs-md); }
.sg-fs-lg { font-size: var(--fs-lg); }
.sg-fs-xl { font-size: var(--fs-xl); }
.sg-fs-2xl { font-size: var(--fs-2xl); }

/* spacing ruler (widths painted by the page script from data-w) */
.sg-space-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.sg-space-row > span:first-child {
  width: 6ch;
  flex: none;
}
.sg-space {
  display: block;
  height: 12px;
  background: var(--accent);
  border-radius: var(--r-sm);
}

/* brand block */
.sg-wordmark {
  font-size: var(--fs-2xl);
}
.sg-lockup {
  width: 220px;
}

/* icon grid */
.sg-icon-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* skeleton specimen widths */
.sg-w-70 { width: 70%; }
.sg-w-40 { width: 40%; }

.sg-colophon {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}