/* Identidade Tráfego Hub — turno 4, opção 4b ("Clique pago").
   Fonte da verdade: refs/Identidade TrafegoHub.dc.html
   Nenhuma cor literal deve aparecer fora deste arquivo.

   Dois temas. O escuro NÃO é uma inversão do claro: é a mesma identidade
   reancorada. O azul da marca (#2354E6) não tem contraste suficiente sobre
   fundo escuro, então no escuro ele clareia para #5B8DEF — mesma família,
   legível. O mesmo vale para teal, coral e âmbar.

   Como o tema é escolhido (ver js/tema.js):
     :root                     → claro (padrão)
     :root[data-tema="escuro"] → escuro forçado pelo botão
     prefers-color-scheme      → quando o usuário nunca clicou no botão */

:root {
  color-scheme: light;

  /* --- marca ------------------------------------------------------------ */
  --azul: #2354E6;
  --azul-fundo: #EEF2FE;
  --azul-borda: #A9BDF5;
  --azul-contraste: #FFFFFF;   /* texto sobre o azul cheio */

  /* Texto da sigla do cliente. É o ÚNICO branco que não muda com o tema, e a
     razão é que o fundo dele também não muda: a bolinha é pintada com a cor do
     cliente, sempre saturada, nos dois temas. Vive aqui mesmo assim — a regra
     do projeto é que cor literal fora deste arquivo não existe, e uma exceção
     "só desta vez" no app.css foi exatamente como nasceram os três branco-no-
     branco que o tema escuro escondia. */
  --sigla-texto: #FFFFFF;

  /* O QR code do cadastro do segundo fator (ver js/qr.js). As outras duas
     cores que não mudam com o tema, e aqui o motivo não é estético, é óptico:
     um QR desenhado com a tinta do tema escuro sai CLARO SOBRE ESCURO, que é o
     símbolo invertido. Parte dos leitores inverte sozinha, parte não — e entre
     os que não invertem estão apps de autenticação. O operador ficaria com uma
     imagem bonita na tela e a câmera parada em cima dela, sem nada explicando
     por quê. Então o QR é sempre escuro sobre claro, com o papel desenhado
     embaixo dele em vez de herdado do cartão, inclusive na borda clara de 4
     módulos que o padrão exige em volta. */
  --qr-modulo: #000000;
  --qr-papel: #FFFFFF;

  /* --- tinta e texto ---------------------------------------------------- */
  --tinta: #17191C;
  --texto-medio: #4E535B;
  --cinza: #8E9199;
  --cinza-claro: #A9ACB2;

  /* --- superfícies ------------------------------------------------------ */
  --fundo: #F7F7F5;
  --cartao: #FFFFFF;
  --borda: #E3E3DF;
  --borda-suave: #EFEFEC;
  --realce: #F7F7F5;           /* hover de linha de tabela */

  /* --- semânticas ------------------------------------------------------- */
  --teal: #0F8A6E;
  --teal-fundo: #E8F5F1;
  --coral: #D0452C;
  --coral-fundo: #FBEDEA;
  --ambar: #B4780A;
  --ambar-fundo: #FDF6E3;

  /* --- canais ----------------------------------------------------------- */
  --google-cor: #B4780A;
  --google-fundo: #FDF6E3;
  --meta-cor: #2354E6;
  --meta-fundo: #EEF2FE;

  /* --- tipografia ------------------------------------------------------- */
  --fonte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* --- métrica ---------------------------------------------------------- */
  --sidebar: 236px;
  --raio: 0px;
  --raio-card: 3px;
}

/* Escuro por preferência do sistema — só enquanto o botão não decidiu. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --azul: #5B8DEF;
    --azul-fundo: #1A2740;
    --azul-borda: #2F4C80;
    --azul-contraste: #0F1114;

    --tinta: #E8E9EC;
    --texto-medio: #A8ADB6;
    --cinza: #7C818B;
    --cinza-claro: #5C616B;

    --fundo: #0F1114;
    --cartao: #17191C;
    --borda: #2A2E35;
    --borda-suave: #212429;
    --realce: #1D2026;

    --teal: #35B894;
    --teal-fundo: #102A24;
    --coral: #F0705A;
    --coral-fundo: #331915;
    --ambar: #D9A23C;
    --ambar-fundo: #2E2413;

    --google-cor: #D9A23C;
    --google-fundo: #2E2413;
    --meta-cor: #5B8DEF;
    --meta-fundo: #1A2740;
  }
}

/* Escuro escolhido no botão — vence a preferência do sistema. */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --azul: #5B8DEF;
  --azul-fundo: #1A2740;
  --azul-borda: #2F4C80;
  --azul-contraste: #0F1114;

  --tinta: #E8E9EC;
  --texto-medio: #A8ADB6;
  --cinza: #7C818B;
  --cinza-claro: #5C616B;

  --fundo: #0F1114;
  --cartao: #17191C;
  --borda: #2A2E35;
  --borda-suave: #212429;
  --realce: #1D2026;

  --teal: #35B894;
  --teal-fundo: #102A24;
  --coral: #F0705A;
  --coral-fundo: #331915;
  --ambar: #D9A23C;
  --ambar-fundo: #2E2413;

  --google-cor: #D9A23C;
  --google-fundo: #2E2413;
  --meta-cor: #5B8DEF;
  --meta-fundo: #1A2740;
}