/* ============================================================
   07 · MARCA

   REGRA TRAVADA: o logo e o LAB entram sempre e apenas como o
   SVG em curvas. Nunca sao recriados com fonte, em nenhum
   tamanho, em nenhuma secao, nem em favicon ou assinatura.
   A unica alteracao permitida e a cor, dentro da paleta.

   A API de cor deste componente e a propriedade `color`, nao
   `fill`. Todos os paths do sprite estao sem atributo fill e
   herdam currentColor atraves do shadow tree do <use>.
   ============================================================ */

@layer marca {

.ds-mark{
  display: block;
  fill: currentColor;
  inline-size: 100%;
  block-size: auto;
}

/* proporcoes, medidas das bounding boxes reais das curvas
   (Bezier resolvida, nao caixa de pontos de controle) */
.ds-mark--lockup   { aspect-ratio: 1368 / 195; }
.ds-mark--lockup-c { aspect-ratio: 1340.19 / 194.26; }
.ds-mark--symbol   { aspect-ratio: 231.92 / 194.26; }
.ds-mark--wordmark { aspect-ratio: 930.07 / 184.4; }
.ds-mark--avatar   { aspect-ratio: 1; }

/* o LAB alinhado a texto: block-size em em e
   preserveAspectRatio="xMinYMid" no proprio <symbol> */
.ds-mark--lab{
  aspect-ratio: 87.2 / 33.85;
  display: inline-block;
  inline-size: auto;
  block-size: .62em;
  vertical-align: baseline;
}

/* ---- CORES PERMITIDAS -------------------------------------
   Nao existe .ds-mark--verde-texto nem meia-opacidade: a marca
   nunca aparece em cor fora destas quatro.
   ------------------------------------------------------------ */
.ds-mark--offwhite{ color: var(--offwhite); }
.ds-mark--verde   { color: var(--verde); }
.ds-mark--preto   { color: var(--preto); }
.ds-mark--latao   { color: var(--latao); }
/* marca d'agua: cor rebaixada, recurso recorrente do sistema */
.ds-mark--agua    { color: var(--verde-2); }

/* ---- PISO DE TAMANHO --------------------------------------
   Nao e recomendacao, e regra de CSS.

   O LAB tem 33.85 de altura num lockup de 195 -> 17.36% da
   altura total. Para o LAB ter no minimo 6px de altura real:

     altura do lockup >= 6 / 0.1736 = 34.6px
     largura          >= 34.6 x 7.0154 = 243px

   Abaixo de 240px de largura o lockup completo nao pode ser
   usado: troca-se pelo simbolo isolado, ou pelo lockup
   compacto, que reabre o LAB reescalando o proprio <use>.
   ------------------------------------------------------------ */
.ds-mark--lockup{ min-inline-size: 240px; }

/* ---- AREA DE PROTECAO --------------------------------------
   Uma altura de capital da wordmark: 108.04 / 195 = 0.554 da
   altura do lockup. Nada entra nessa faixa.
   ------------------------------------------------------------ */
.ds-clearspace{
  --lockup-h: 40px;
  padding: calc(var(--lockup-h) * .554);
  display: inline-block;
}

/* ---- BLOCO DE EXIBICAO DE MARCA (secoes 02 e 10) ---------- */
.ds-markbox{
  display: grid;
  place-items: center;
  padding: var(--space-8);
  background: var(--verde-2);
  min-block-size: 200px;
}
.ds-markbox--creme{ background: var(--offwhite); }
.ds-markbox--preto{ background: var(--preto); }
.ds-markbox--latao{ background: var(--latao); }
.ds-markbox__cap{ margin-block-start: var(--space-3); }

}