/* Estilos só da página /design-system (guia de componentes); não fazem parte do design system */
.guia-subtitulo { font-size: var(--tamanho-sm); font-weight: var(--peso-semibold); color: var(--texto-2); margin: var(--espaco-4) 0 var(--espaco-2); }
.guia-subtitulo:first-of-type { margin-top: 0; }
.guia-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--espaco-3); }
.guia-cor { display: flex; flex-direction: column; gap: var(--espaco-1-5); min-width: 0; font-size: var(--tamanho-xs); color: var(--texto-2); }
.guia-cor-amostra { height: 48px; border-radius: var(--raio-sm); border: 1px solid var(--borda); }
.guia-escala > li { display: flex; align-items: center; gap: var(--espaco-4); padding: var(--espaco-2) 0; min-width: 0; }
.guia-escala > li + li { border-top: 1px solid var(--borda); }
.guia-escala code { width: 170px; flex: none; font-size: var(--tamanho-xs); color: var(--texto-3); }
.guia-barra { height: 12px; border-radius: 3px; background: var(--primaria); }