/* Grade, alturas de componente e ausência declarada de sombra e raio. */
:root {
  --bo-largura-util: 1180px;
  --bo-margem: var(--bo-e7);     /* 48 em tela larga */
  --bo-colunas: 12; /* @kind other */
  --bo-vao: var(--bo-e5);        /* 24 em tela larga, e3 no telefone */

  --bo-raio: 0; /* @kind radius */
  --bo-sombra: none; /* @kind shadow */
  --bo-largura-regua: 1px;
  --bo-traco-marca: 1.5px;       /* traço do logotipo em corpo 34 · 1:22,7 */

  --bo-altura-controle: 48px;    /* botão e campo */
  --bo-altura-chip: 32px;
  --bo-alvo-toque: 44px;         /* mobile · 32 em desktop */

  --bo-transicao: 120ms linear; /* @kind other */
}

/* breakpoints · a faixa muda colunas, vão e margem; o corpo do texto não muda */
@media (max-width: 599px)  { :root { --bo-colunas: 4; /* @kind other */ --bo-vao: var(--bo-e3); --bo-margem: var(--bo-e5); } }
@media (min-width: 600px) and (max-width: 899px)  { :root { --bo-colunas: 6; /* @kind other */ --bo-vao: var(--bo-e4); --bo-margem: var(--bo-e6); } }
@media (min-width: 900px)  { :root { --bo-colunas: 12; /* @kind other */ --bo-vao: var(--bo-e5); --bo-margem: var(--bo-e7); } }