/*
 * STYLE GUIDE (somente desenvolvimento)
 * Responsabilidade: layout da PÁGINA de demonstração de tokens.
 * NÃO contém estilo reutilizável de componente. Quando os componentes
 * globais existirem, esta página passa a exibi-los; este CSS continua
 * cuidando apenas da grade/organização da própria página de demo.
 */

.sg-section {
  margin-bottom: var(--space-7);
}

.sg-section__title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Grade de amostras (cores, radius, espaçamentos). */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

/* Amostra individual: rótulo + demonstração visual. */
.sg-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.sg-swatch__box {
  height: 56px;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
}

.sg-swatch__label {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Demonstração de tipografia em escala. */
.sg-type {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Demonstração de radius. */
.sg-radius-box {
  height: 72px;
  background-color: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Demonstração de espaçamento: barra cuja largura é o token. */
.sg-space-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.sg-space-bar {
  height: 16px;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
}

/* Linha de botões na vitrine — espaça as amostras. */
.sg-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}