/* ====================================================================
   MÁQUINA ÓTICA — identidade de marca
   ====================================================================

   Fonte da verdade da MARCA. Valores tirados do manual de identidade.
   Nada aqui é escolha de design: é constante do negócio.

   tokens.css consome estes valores e deriva deles o que a INTERFACE
   precisa. A separação importa: quando a marca mudar um tom, muda-se
   um arquivo; quando a interface precisar de uma variante acessível,
   ela é derivada aqui sem mexer na marca.

   "MARKETING QUE CHEGA NO CAIXA"
   ==================================================================== */

:root {
  /* ---- Paleta oficial ---- */
  --mo-carvao: #111111;        /* Base       */
  --mo-amarelo: #ffc400;       /* Destaque   */
  --mo-branco: #f7f7f2;        /* Apoio      */
  --mo-verde-caixa: #19b45b;   /* Resultado  */
  --mo-vermelho-alerta: #e63b32; /* Atenção  */

  /* ------------------------------------------------------------------
     VARIANTES ACESSÍVEIS — por que elas existem
     ------------------------------------------------------------------
     Medido contra branco (#ffffff):

       --mo-verde-caixa      #19b45b  →  2.75:1   reprova até em 3:1
       --mo-vermelho-alerta  #e63b32  →  4.19:1   passa em 3:1, reprova em 4.5:1

     Os dois são excelentes como PREENCHIMENTO (badge, barra, ponto de
     status) e como NUMERAL GRANDE, onde 3:1 basta. Como texto de 11-13px
     — que é quase todo o texto de um CRM — eles reprovam em WCAG AA.

     A resposta não é clarear a marca nem aceitar texto ilegível: é ter
     uma variante escura de cada um, usada SÓ para texto pequeno. O verde
     que o cliente reconhece continua o mesmo no badge; o texto dentro
     dele é legível no monitor da loja com luz batendo na tela.
     ------------------------------------------------------------------ */
  --mo-verde-texto: #0f7a3d;      /* ≥4.5:1 sobre branco e sobre verde-bg */
  --mo-vermelho-texto: #b02a22;   /* ≥4.5:1 sobre branco e sobre vermelho-bg */

  /* Fundos suaves derivados, para badge e faixa. */
  --mo-verde-bg: #e8f6ee;
  --mo-verde-borda: #7fd3a4;
  --mo-vermelho-bg: #fdecea;
  --mo-vermelho-borda: #f0a29c;

  /* ---- Tipografia ----
     MONUMENT EXTENDED é fonte comercial (Pangram Pangram). NÃO está no
     Google Fonts e NÃO pode ser carregada por @import público — a
     licença precisa ser adquirida e o arquivo hospedado pelo projeto.

     Enquanto isso, a pilha degrada para uma extended/condensed larga do
     sistema. O texto continua legível e a hierarquia se mantém; o que se
     perde é o caráter da marca nos títulos.

     Ver docs/BRAND.md → "Licenciamento de fonte".

     INTER é livre (SIL OFL) e carrega normalmente. */
  --mo-font-display: "Monument Extended", "Archivo Expanded", "Archivo",
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mo-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Assinatura ---- */
  --mo-tagline: "MARKETING QUE CHEGA NO CAIXA";

  /* ---- Tratamento do display ----
     Monument Extended já é larga. O tracking negativo compensa a largura
     em títulos grandes e evita que "MÁQUINA ÓTICA" ocupe a tela inteira. */
  --mo-display-tracking: -0.01em;
  --mo-display-weight: 800;

  /* Letter-spacing POSITIVO para os rótulos em caixa alta da marca
     ("MAIS ÓTICAS MAIS RESULTADOS"). Caixa alta sem tracking gera
     blocos compactos difíceis de ler. */
  --mo-label-tracking: 0.12em;
}

/* ====================================================================
   Modo escuro — o dourado precisa ser rebaixado
   ====================================================================
   #ffc400 puro sobre fundo quase preto vibra e cansa a vista em uso
   prolongado. O inbox fica aberto o dia inteiro. O verde e o vermelho
   sobem de luminosidade para manter contraste sobre fundo escuro. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mo-amarelo: #f0b800;
    --mo-verde-texto: #6fd49b;
    --mo-vermelho-texto: #f4a29c;
    --mo-verde-bg: #10281b;
    --mo-verde-borda: #2f6b47;
    --mo-vermelho-bg: #2a1413;
    --mo-vermelho-borda: #7a3430;
  }
}

:root[data-theme="dark"] {
  --mo-amarelo: #f0b800;
  --mo-verde-texto: #6fd49b;
  --mo-vermelho-texto: #f4a29c;
  --mo-verde-bg: #10281b;
  --mo-verde-borda: #2f6b47;
  --mo-vermelho-bg: #2a1413;
  --mo-vermelho-borda: #7a3430;
}

/* ====================================================================
   Elementos da identidade
   ==================================================================== */

/* Assinatura sob o logo. */
.mo-tagline::after {
  content: var(--mo-tagline);
  letter-spacing: var(--mo-label-tracking);
}

/* Rótulo em caixa alta no padrão da marca. */
.mo-label {
  text-transform: uppercase;
  letter-spacing: var(--mo-label-tracking);
  font-weight: 600;
}

/* Fio dourado — o separador curto que aparece sob os blocos de texto
   no manual. É o elemento gráfico mais barato da marca e o que mais
   a identifica: usa-se muito, custa 2px. */
.mo-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--mo-amarelo);
  border: none;
  margin: 0;
}