@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Figtree:wght@400;500;600;700;800&display=swap");

/* ============================================================
   DENYS SORVETES — identidade aplicada ao sistema
   Paleta e tipografia do manual (pglr, 02/2024), as mesmas do site
   denyssorvetes.com.br, para quem sai de um e entra no outro
   reconhecer a mesma marca.

   O manual manda em quatro regras, e elas valem aqui:
     · creme e o fundo padrao — nunca branco puro;
     · marinho e a cor do texto — nunca preto;
     · amarelo e vermelho sao acento: quando um vira fundo, o outro
       vira o destaque;
     · nada de gradiente e nada de quinta cor.

   O que NAO foi trazido do site, de proposito: a borda de 3px e a
   sombra dura de 6px em tudo. No site aquilo e energia; numa tabela
   com trinta linhas vira ruido e come espaco. Aqui a personalidade
   mora no logo, na barra marinho, no amarelo do item ativo e no
   vermelho do botao — e a sombra dura sobrou so onde ela ainda
   ajuda: no botao principal.
   ============================================================ */

:root {
  --creme:      #F3EAD6;
  --creme-2:    #EADFC4;
  --marinho:    #09233B;
  --vermelho:   #E01E2B;
  --vermelho-esc: #B8161F;
  --amarelo:    #F9B50A;
  --branco:     #FFFBF2;

  /* ---------- superficies ---------- */
  --bg:          var(--creme);
  --surface:     var(--branco);
  --surface-2:   #F8F1E2;
  --surface-3:   var(--creme-2);
  --border:      #DBCDAF;
  --border-soft: #EBE1CB;

  /* ---------- texto: marinho, nunca preto ---------- */
  --text:       var(--marinho);
  --text-muted: rgba(9, 35, 59, .70);
  --text-faint: rgba(9, 35, 59, .45);

  /* ---------- acento: vermelho age, amarelo destaca ---------- */
  --brand:           var(--vermelho);
  --brand-dark:      var(--vermelho-esc);
  --brand-texto:     var(--vermelho-esc);
  --brand-vivo:      var(--amarelo);
  --sobre-vivo:      var(--marinho);   /* texto sobre amarelo */
  --brand-soft:      #FDF3D9;
  --brand-linha:     #F6DCA2;
  --brand-contraste: var(--branco);

  /* ---------- barra lateral: marinho com logo amarelo ----------
     e uma das combinacoes que o manual valida por escrito. */
  --sidebar-bg:     var(--marinho);
  --sidebar-text:   var(--creme);
  --sidebar-muted:  rgba(243, 234, 214, .62);
  --sidebar-faint:  rgba(243, 234, 214, .38);
  --sidebar-border: #143A5C;
  --sidebar-hover:  #0E2E4C;
  --sidebar-brand:  var(--amarelo);

  /* ---------- cores de estado ----------
     Estas nao sao da marca — sao funcao. Um sistema precisa dizer
     "deu certo", "cuidado" e "deu errado" sem depender de leitura.
     Ficam dessaturadas para nao brigar com o amarelo e o vermelho,
     e o vermelho de erro e o vermelho da propria marca. */
  --green:    #1F7A52;
  --green-bg: #DFF0E6;
  --orange:   #C67A06;
  --orange-bg: #FBEBCB;
  --red:      var(--vermelho);
  --red-bg:   #FADEDF;
  --blue:     #2B5E85;
  --blue-bg:  #DDE8F0;

  --shadow:    0 1px 2px rgba(9, 35, 59, .07);
  --shadow-lg: 0 18px 44px rgba(9, 35, 59, .16);

  /* ---------- tipografia, a mesma do site ----------
     Josefin Sans e a substituta de licenca livre da Brandon Grotesque
     do manual — as fontes entregues pela agencia sao TRIAL da HvD e
     nao podem ir para a web. Figtree carrega o texto corrido e os
     dados, onde Josefin fica fina demais para ler o dia inteiro. */
  --ui:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Figtree", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Josefin Sans", system-ui, sans-serif;
}

/* O tema escuro do nucleo vira marinho profundo, nao carvao: escuro
   fora da paleta seria a quinta cor que o manual proibe. */
:root[data-tema="carvao"] {
  --bg:          #061826;
  --surface:     #0B2437;
  --surface-2:   #102B40;
  --surface-3:   #163449;
  --border:      #1C3F58;
  --border-soft: #143045;
  --text:        var(--creme);
  --text-muted:  rgba(243, 234, 214, .72);
  --text-faint:  rgba(243, 234, 214, .45);
  --brand:           var(--amarelo);
  --brand-dark:      #D89C07;
  --brand-texto:     var(--amarelo);
  --brand-vivo:      var(--amarelo);
  --sobre-vivo:      var(--marinho);
  --brand-soft:      #143045;
  --brand-linha:     #1C3F58;
  --brand-contraste: #0B2437;
  --sidebar-bg:     #04121D;
  --sidebar-border: #143A5C;
  --sidebar-hover:  #0C2739;
  --green-bg: #10322A;
  --orange-bg: #33280C;
  --red-bg:   #3A1418;
  --blue-bg:  #12293A;
}

/* ============================================================
   TIPOGRAFIA — o titulo carrega a marca, o dado carrega a leitura
   ============================================================ */

h1, h2, h3,
.page-head h2,
.modulo-atual,
.modulo-tab span,
.marca-cliente .wm b {
  font-family: var(--display);
  letter-spacing: .005em;
}

h1, h2, .page-head h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .012em;
}

/* A aba do modulo em caixa alta e a assinatura tipografica do site
   trazida para o sistema — e o lugar onde ela cabe sem atrapalhar. */
.modulo-tab span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .085em;
  font-size: 12.5px;
}

.modulo-atual {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* ============================================================
   COMPONENTES — só onde a marca muda de verdade
   ============================================================ */

/* O botao principal e o unico lugar que herda a sombra dura do site.
   E o gesto da marca, e num botao ele ajuda: dá peso ao "isto aqui
   e a acao". Em tabela seria ruido. */
button.primary,
.primary {
  background: var(--vermelho);
  color: var(--branco);
  border: 2px solid var(--marinho);
  box-shadow: 3px 3px 0 var(--marinho);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
button.primary:hover,
.primary:hover {
  background: var(--vermelho-esc);
  box-shadow: 4px 4px 0 var(--marinho);
  transform: translate(-1px, -1px);
}
button.primary:active,
.primary:active {
  box-shadow: 1px 1px 0 var(--marinho);
  transform: translate(2px, 2px);
}
button.primary:disabled,
.primary:disabled {
  background: var(--creme-2);
  color: var(--text-faint);
  box-shadow: none;
  transform: none;
}

/* O item ativo do menu: amarelo sobre marinho, combinacao validada
   no manual. */
.sidebar .nav-item.active {
  color: var(--amarelo);
  box-shadow: inset 3px 0 0 var(--amarelo);
}

/* O logo respira: no manual ele nunca aparece espremido. */
/* A assinatura tipografica (sem o mascote) e a versao que o manual preve
   para tamanho pequeno: aos 34px o mascote perde o rosto e vira um borrao
   amarelo. O mascote continua no login, onde tem espaco para aparecer. */
.sidebar .marca-logo { height: 30px; margin: 8px 6px 22px; }
.login-card .marca-logo { height: 62px; }

/* Cartao da marca no rodape da lateral — o quadrado com contorno,
   igual ao selo da embalagem. */
.sidebar-method .celula {
  border-color: var(--amarelo);
  background: rgba(249, 181, 10, .07);
}
.sidebar-method .celula .sym {
  font-family: var(--display);
  font-weight: 700;
  color: var(--amarelo);
}
.sidebar-method .celula .label,
.sidebar-method p { color: var(--sidebar-muted); }

/* Etiquetas de coluna e olho de secao: caixa alta espacada, o mesmo
   recurso que o site usa para separar assunto. */
th, .ind-rotulo, .eyebrow, .olho {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 600;
}

/* Numero grande e o argumento da tela — no site ele e amarelo sobre
   marinho; aqui, marinho sobre creme, pelo mesmo motivo invertido. */
.ind-valor {
  font-family: var(--display);
  font-weight: 700;
  /* `var(--text)`, nunca o marinho direto: no tema escuro o marinho fica
     igual ao fundo e o numero — que e o argumento da tela — some. Cor de
     componente sai do token, sempre. */
  color: var(--text);
  letter-spacing: -.01em;
}

/* Login: o cartao sobre creme, com o contorno da marca. */
.login-card {
  border: 3px solid var(--marinho);
  box-shadow: 6px 6px 0 var(--marinho);
  border-radius: 6px;
}
.login-card p.sub,
.login-card .sub {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
}


/* A tela de entrada usa a mesma acao do resto: vermelho com contorno
   marinho. O nucleo tem uma regra mais especifica para o login
   (`.login-card button.primary`), entao aqui ela precisa ser igualada. */
.login-card button.primary {
  background: var(--vermelho);
  border-color: var(--marinho);
  color: var(--branco);
}
.login-card button.primary:hover {
  background: var(--vermelho-esc);
  border-color: var(--marinho);
  color: var(--branco);
}

/* ============================================================
   AÇÃO x SELEÇÃO — o manual resolve isto sozinho
   "amarelo e vermelho sao acento: quando um vira fundo, o outro vira
   o destaque." Entao: VERMELHO e o botao que FAZ alguma coisa;
   AMARELO e o estado SELECIONADO.

   O nucleo reaproveita a classe `.primary` nos dois papeis — no botao
   de acao e no chip de filtro ligado. Sem esta separacao, uma tela de
   funil abre com tres vermelhos gritando na mesma linha e nenhum deles
   parece mais importante que o outro.
   ============================================================ */

button.primary.small,
.filters-bar button.primary {
  background: var(--amarelo);
  color: var(--marinho);
  border: 1.5px solid var(--marinho);
  box-shadow: none;
  transform: none;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
button.primary.small:hover,
.filters-bar button.primary:hover {
  background: #FFC42E;
  color: var(--marinho);
  box-shadow: none;
  transform: none;
}
button.primary.small:active,
.filters-bar button.primary:active {
  background: #E5A609;
  box-shadow: none;
  transform: none;
}

/* O chip do funil escolhido e o mais importante da barra: ganha o
   contorno cheio, os outros ficam so preenchidos. */
.filters-bar button.primary:first-of-type { box-shadow: 2px 2px 0 var(--marinho); }

/* ============================================================
   TELA DE ENTRADA — marinho de fundo, o cartao em creme claro
   O manual valida "logo colorido sobre creme": o cartao e claro para o
   mascote aparecer com as cores dele, e o fundo e o marinho da marca,
   nao um preto qualquer.
   ============================================================ */
:root {
  --login-bg: var(--marinho);
  --login-grade: var(--amarelo);
}
.login-card { width: 400px; }
.login-card .marca-logo { height: 74px; margin: 0 auto 20px; }