/* ═══════════════════════════════════════════════════════════
   NUCLEO DESIGN — o sistema recriado que aparece na pagina de
   case /projetos/design-system.

   POR QUE ESTE ARQUIVO EXISTE SEPARADO DO tokens.css:
   sao dois sistemas diferentes. O tokens.css e a fonte da
   verdade DESTE site; o que esta aqui pertence ao sistema
   recriado que a pagina exibe como artefato. Misturar os dois
   faria o site herdar decisoes que nao sao dele.

   Por isso tudo aqui esta escopado em `.nd` e prefixado com
   `--nd-`: nenhum valor deste arquivo alcanca o restante do
   site, mesmo que uma classe se repita por acidente.

   A camada de marca (`.nd-apice`, `.nd-lume`, `.nd-vertice`)
   redefine tres variaveis e nada mais. E a demonstracao, em
   codigo, da decisao "um nucleo, tres marcas": o componente
   nao sabe qual marca esta vestindo.
   ═══════════════════════════════════════════════════════════ */

.nd {

  /* ── Nucleo: comum as tres marcas ────────────────────────── */

  --nd-papel:        #ffffff;
  --nd-nevoa:        #f1f3f5;
  --nd-tinta:        #14161a;
  --nd-tinta-2:      #565b63;
  --nd-linha:        rgba(20, 22, 26, .12);
  --nd-linha-soft:   rgba(20, 22, 26, .06);

  /* Marca corrente. O valor padrao e Apice, e a camada de marca
     troca estes tres e mais nada.
       --nd-marca        preenchimento
       --nd-marca-sobre  tinta que fica POR CIMA do preenchimento
       --nd-marca-tinta  a marca como cor de TEXTO sobre o papel,
                         escurecida ate passar em AA */
  --nd-marca:        #1d3557;
  --nd-marca-sobre:  #ffffff;
  --nd-marca-tinta:  #1d3557;

  --nd-raio:         10px;
  --nd-raio-sm:      6px;

  --nd-esp-1:        4px;
  --nd-esp-2:        8px;
  --nd-esp-3:        12px;
  --nd-esp-4:        18px;
  --nd-esp-5:        28px;
  --nd-esp-6:        40px;
}

/* ── Camada de marca ───────────────────────────────────────── */

.nd-apice {
  --nd-marca:        #1d3557;
  --nd-marca-sobre:  #ffffff;
  --nd-marca-tinta:  #1d3557;   /* 12,4:1 sobre o papel */
}

/* Lume e a excecao do sistema: e clara demais para receber texto
   branco, entao o preenchimento leva tinta escura por cima, e a
   versao de texto e uma variante rebaixada. Mesma logica do lime
   no tokens.css deste site. */
.nd-lume {
  --nd-marca:        #f4a924;
  --nd-marca-sobre:  #1a1206;   /* 9,3:1 sobre o ambar */
  --nd-marca-tinta:  #7d5100;   /* 6,9:1 sobre o papel */
}

.nd-vertice {
  --nd-marca:        #0e6e5c;
  --nd-marca-sobre:  #ffffff;   /* 6,2:1 sobre o verde */
  --nd-marca-tinta:  #0b5748;   /* 8,5:1 sobre o papel */
}


/* ── Quadro: a moldura de todo artefato ────────────────────── */

.nd {
  border: 1px solid var(--nd-linha);
  border-radius: var(--radius-card);
  background: var(--nd-papel);
  color: var(--nd-tinta);
  overflow: clip;
}

.nd-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-esp-3);
  padding: var(--nd-esp-3) var(--nd-esp-5);
  border-bottom: 1px solid var(--nd-linha-soft);
  background: var(--nd-nevoa);
}

.nd-topo-marca {
  font-weight: 600;
  font-size: var(--size-sm);
  letter-spacing: -.01em;
}

.nd-topo-versao {
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  color: var(--nd-tinta-2);
  border: 1px solid var(--nd-linha);
  border-radius: var(--radius-pill);
  padding: 2px var(--nd-esp-2);
}

.nd-topo-secao {
  margin-left: auto;
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--nd-tinta-2);
}

.nd-corpo { padding: var(--nd-esp-5); }

.nd-legenda {
  margin: var(--space-3) 0 0;
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--nd-tinta-2);
}

.nd-sub {
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--nd-tinta-2);
  margin: 0 0 var(--nd-esp-2);
}


/* ── Capa do sistema ───────────────────────────────────────── */

.nd-capa-nome {
  font-size: var(--size-2);
  font-weight: 600;
  letter-spacing: var(--track-2);
  margin: 0;
}

.nd-capa-frase {
  margin: var(--nd-esp-3) 0 0;
  max-width: 46ch;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--nd-tinta-2);
}

.nd-principios {
  list-style: none;
  margin: var(--nd-esp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--nd-esp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
}

.nd-principio {
  border: 1px solid var(--nd-linha);
  border-radius: var(--nd-raio);
  padding: var(--nd-esp-4);
}

.nd-principio-num {
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  color: var(--nd-marca-tinta);
}

.nd-principio-nome {
  display: block;
  margin: var(--nd-esp-2) 0 var(--nd-esp-1);
  font-weight: 600;
  font-size: var(--size-sm);
}

.nd-principio p {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--nd-tinta-2);
}


/* ── Cor: a grade das tres notacoes ────────────────────────── */

.nd-cores {
  display: grid;
  gap: var(--nd-esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.nd-cor {
  border: 1px solid var(--nd-linha);
  border-radius: var(--nd-raio);
  overflow: clip;
}

.nd-cor-amostra {
  height: 96px;
  background: var(--nd-marca);
  display: flex;
  align-items: flex-end;
  padding: var(--nd-esp-3);
  color: var(--nd-marca-sobre);
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.nd-cor-specs {
  margin: 0;
  padding: var(--nd-esp-3) var(--nd-esp-4) var(--nd-esp-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--nd-esp-1) var(--nd-esp-3);
  font-family: var(--type-mono);
  font-size: var(--size-mono);
}

.nd-cor-specs dt {
  color: var(--nd-tinta-2);
  letter-spacing: var(--track-label);
}

.nd-cor-specs dd { margin: 0; }

.nd-cor-uso {
  grid-column: 1 / -1;
  margin-top: var(--nd-esp-2);
  padding-top: var(--nd-esp-2);
  border-top: 1px solid var(--nd-linha-soft);
  font-family: var(--type-sans);
  font-size: var(--size-sm);
  line-height: 1.45;
  color: var(--nd-tinta-2);
}



/* ── Marcas lado a lado ────────────────────────────────────── */

.nd-marcas {
  display: grid;
  gap: var(--nd-esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.nd-marca-cartao {
  border: 1px solid var(--nd-linha);
  border-radius: var(--nd-raio);
  padding: var(--nd-esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--nd-esp-3);
}

.nd-marca-assinatura {
  display: flex;
  align-items: center;
  gap: var(--nd-esp-2);
  font-weight: 600;
  font-size: var(--size-body);
  color: var(--nd-marca-tinta);
}

.nd-marca-simbolo {
  width: 26px;
  height: 26px;
  border-radius: var(--nd-raio-sm);
  background: var(--nd-marca);
  color: var(--nd-marca-sobre);
  display: grid;
  place-items: center;
  font-family: var(--type-mono);
  font-size: var(--size-mono);
}

.nd-marca-nota {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--nd-tinta-2);
}


/* ── Componentes ───────────────────────────────────────────── */

.nd-componentes {
  display: grid;
  gap: var(--nd-esp-5);
  /* Duas colunas no desktop, e nao tres: com quatro componentes, tres por
     linha deixam um buraco do tamanho de um cartao na segunda linha.

     `min(420px, 100%)` no lugar de `420px` seco: `minmax(min(420px, 100%), 1fr)` cria uma
     coluna que NUNCA encolhe abaixo de 420px, entao em tela de 320px o cartao
     saia 100px para fora e ficava cortado pelo `overflow-x: hidden` do body,
     invisivel e inalcancavel. Acima de 420px de container as duas formas sao
     identicas: o `min()` so entra em acao quando nao ha espaco. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.nd-componente {
  border: 1px solid var(--nd-linha);
  border-radius: var(--nd-raio);
  padding: var(--nd-esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--nd-esp-3);
}

.nd-palco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nd-esp-3);
  padding: var(--nd-esp-4);
  border-radius: var(--nd-raio-sm);
  background: var(--nd-nevoa);
}

/* A regra de uso fica colada no componente, e nao numa pagina de
   diretrizes separada: e o que faz a consulta ser mais rapida do
   que perguntar a alguem. */
.nd-regra {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.5;
  color: var(--nd-tinta-2);
}
.nd-regra b { color: var(--nd-tinta); font-weight: 600; }

.nd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--nd-esp-4);
  border-radius: var(--nd-raio-sm);
  border: 1px solid transparent;
  background: var(--nd-marca);
  color: var(--nd-marca-sobre);
  font-family: inherit;
  font-size: var(--size-sm);
  font-weight: 500;
  letter-spacing: -.01em;
}
.nd-btn-2 {
  background: transparent;
  color: var(--nd-marca-tinta);
  border-color: var(--nd-linha);
}
.nd-btn-3 {
  background: transparent;
  color: var(--nd-marca-tinta);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nd-campo { display: grid; gap: var(--nd-esp-1); width: 100%; }

.nd-campo-rotulo {
  font-size: var(--size-sm);
  font-weight: 500;
}

.nd-campo-caixa {
  border: 1px solid var(--nd-linha);
  border-radius: var(--nd-raio-sm);
  background: var(--nd-papel);
  padding: 10px var(--nd-esp-3);
  font-size: var(--size-sm);
  color: var(--nd-tinta-2);
}

.nd-campo-ajuda {
  font-size: var(--size-mono);
  font-family: var(--type-mono);
  color: var(--nd-tinta-2);
}

.nd-aviso {
  display: flex;
  gap: var(--nd-esp-3);
  width: 100%;
  padding: var(--nd-esp-3) var(--nd-esp-4);
  border-radius: var(--nd-raio-sm);
  border: 1px solid var(--nd-linha);
  border-left: 3px solid var(--nd-marca);
  background: var(--nd-papel);
  font-size: var(--size-sm);
  line-height: 1.5;
}

.nd-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--nd-esp-2);
  border-radius: var(--radius-pill);
  background: var(--nd-marca);
  color: var(--nd-marca-sobre);
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}


/* ── Tom de voz ────────────────────────────────────────────── */

.nd-voz {
  display: grid;
  gap: var(--nd-esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.nd-voz-col {
  border: 1px solid var(--nd-linha);
  border-radius: var(--nd-raio);
  padding: var(--nd-esp-4);
}

.nd-voz-titulo {
  display: block;
  margin-bottom: var(--nd-esp-3);
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--nd-tinta-2);
}

.nd-voz-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--nd-esp-3); }

.nd-voz-lista li {
  font-size: var(--size-sm);
  line-height: 1.5;
  padding-left: var(--nd-esp-4);
  position: relative;
}
.nd-voz-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--nd-marca);
}


/* ── Release ───────────────────────────────────────────────── */

.nd-release { display: grid; gap: var(--nd-esp-4); }

.nd-release-linha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--nd-esp-4);
  align-items: start;
  padding-bottom: var(--nd-esp-4);
  border-bottom: 1px solid var(--nd-linha-soft);
}
.nd-release-linha:last-child { border-bottom: 0; padding-bottom: 0; }

.nd-release-versao {
  font-family: var(--type-mono);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--nd-marca-tinta);
  min-width: 8ch;
}

.nd-release-nota { margin: 0; font-size: var(--size-sm); line-height: 1.5; }
.nd-release-nota span {
  display: block;
  margin-top: 2px;
  font-family: var(--type-mono);
  font-size: var(--size-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--nd-tinta-2);
}

@media (max-width: 560px) {
  .nd-corpo { padding: var(--nd-esp-4); }
  .nd-topo { padding-inline: var(--nd-esp-4); }
  .nd-topo-secao { margin-left: 0; flex-basis: 100%; }
}