/*
  Tema ODONTO LÓGICA — plano odontológico (Avaré/SP), ANS nº 38.621-9.

  FONTE: o site institucional odontologicaavare.com.br (não há legado SICOPS
  deste cliente). As cores saem do kit do Elementor e do uso real na página:

    #313F5C  accent do kit — é o FUNDO DO PRÓPRIO HEADER do site (por isso o
             logotipo publicado é a variante clara) e o navio das letras ODONTO
    #4989A4  primary do kit — o azul-petróleo da identidade
    #0C51A1  fundo de seção da home, com texto branco — o papel de "marca
             que preenche botão" já existe lá com esta cor

  MEDIDO x DERIVADO:

    --brand        #0C51A1   MEDIDO (fundo de seção com texto branco; 7,76:1)
    --sidebar-bg   #313F5C   MEDIDO (o fundo do header do institucional; 10,52:1)
    --sidebar-nav  #4989A4   MEDIDO (primary do kit; 3,89:1 — abaixo de 4,5,
                             mas é a cor do cliente e o papel é destaque de nav,
                             não texto corrido)
    --brand-dark   #093D79   DERIVADO: mesmo matiz do brand, luz menor (o site
                             não tem estado de hover)
    --brand-light  #EAF1F9   DERIVADO: o mesmo azul como tinta clara de fundo

  LOGOTIPO: o cliente só publica a variante CLARA (LÓGICA e slogan em branco,
  para o header navy). Para o nosso header branco e para impressos, os
  logotipo*.png são a MESMA arte com os brancos recoloridos no navy #313F5C do
  próprio cliente; a original está em logotipo_claro.png, para superfície escura.
*/
:root {
  --brand:        #0c51a1;   /* azul de seção do institucional (7,76:1) */
  --brand-dark:   #093d79;   /* hover/gradiente — derivado (10,7:1) */
  --brand-light:  #eaf1f9;   /* fundo suave — derivado */
  --sidebar-bg:   #313f5c;   /* navy do header do institucional (10,52:1) */
  --sidebar-nav:  #4989a4;   /* azul-petróleo primary do kit (3,89:1) */
}

/* ── TEMA ESCURO ──────────────────────────────────────────────────────
   Só o app da operadora tem tema escuro. A marca aqui muda de papel:
   `--brand` continua sendo o PREENCHIMENTO (botão sólido com texto branco)
   e `--brand-ink` é a marca como TINTA (texto, borda, anel, ícone), que
   precisa ser mais clara para ser lida sobre o fundo escuro.
   Valores de:
     node packages/core/scripts/sugere-marca-escura.mjs '#0c51a1' */
:root[data-theme="dark"] {
  --brand-ink:   #6390c3;   /* marca clareada 36% p/ ser legível sobre a superfície escura */
  --brand-dark:  #306baf;   /* hover do botão sólido: sobe, não escurece */
}
