/*
 * TOKENS — o único arquivo com valores literais.
 *
 * HERDADO DO AulasFront (que o herdou do SeiWebFront), e de propósito: a estrutura do Gourmet PDV é
 * a dos projetos irmãos. O raciocínio dos comentários abaixo — a conferência de daltonismo nas séries,
 * a sombra que não nasce do texto, a linha selecionada que não segue o tema — sobrevive aqui porque
 * continua verdadeiro. O que mudou foi a marca: o verde #035338 (a arte do Gourmet PDV usa #05543b,
 * que a olho é o mesmo — a primária ficou, e com ela todo contraste já conferido).
 *
 * Nenhum hexadecimal existe fora daqui. É o que torna o tema escuro uma troca de variável em vez
 * de uma reescrita — e o que impede o clássico texto preto sobre fundo preto num canto que
 * ninguém abriu.
 *
 * O tema segue data-bs-theme na raiz do documento.
 */

:root {
  /* superfícies e bordas */
  --cp-fundo: #f7f8fa;
  --cp-superficie: #ffffff;
  --cp-borda: #e3e6ea;
  --cp-borda-forte: #cdd2d9;

  /* texto */
  --cp-texto: #16191d;
  --cp-texto-suave: #5b6470;

  /* DOIS TOKENS QUE FALTAVAM.
     Vieram usados no app.css herdado e nunca definidos - nem la, nem aqui. Em CSS, var() sem
     definicao e sem alternativa torna a propriedade invalida no calculo: o fundo do avatar
     simplesmente nao pintava, e a cor do texto de apoio caia para a herdada. Nao quebra tela
     nenhuma, e por isso ninguem viu. Definidos, o avatar vazio volta a ter fundo. */
  --cp-superficie-2: #eef0f4;
  --cp-texto-apoio: #7b8593;

  /* marca */
  --cp-primaria: #035338;
  --cp-primaria-suave: #e3f1ea;
  --cp-sobre-primaria: #ffffff;

  /* A MARCA GOURMET PDV — a cor do DESENHO, não da interface.

     A cloche e o "Gourmet" usam currentColor: brancos na lateral escura, no verde da primária no
     cartão de entrada. O "PDV" tem cor própria, o verde claro da identidade, e em DOIS tons, os das
     duas artes de referência: #12b76a sobre o claro, #1ed47e sobre o escuro (ver o bloco escuro).
     Um tom só não serve aos dois: o claro vivo some em branco, o mais escuro apaga no verde. */
  --cp-marca-destaque: #12b76a;

  /* OS DOIS TRAÇOS inclinados: no verde claro sobre fundo claro, e na tinta da marca (branco) sobre
     o escuro — é o que as duas artes fazem. currentColor aqui é resolvido onde o traço é pintado,
     então herda a cor de quem envolve a marca, como a cloche. */
  --cp-marca-tracos: var(--cp-marca-destaque);

  /* A TINTA do resto da marca fora da lateral: o verde da primaria no claro. No escuro vira o
     branco do texto (ver o bloco escuro) - como na arte, onde cloche e "Gourmet" sao brancos. */
  --cp-marca-tinta: var(--cp-primaria);

  /* SOMBRA. Ela nasce de --cp-texto? Nao. No tema escuro --cp-texto e quase branco, e a "sombra"
     virava um HALO claro em volta do aviso -- luz vinda de baixo, que nenhuma sombra faz.
     Sombra e ausencia de luz: escura nos dois temas, e mais densa no escuro porque o fundo tem
     menos margem para escurecer. */
  --cp-sombra: rgba(22, 25, 29, 0.16);
  --cp-sombra-contato: rgba(22, 25, 29, 0.10);

  /* estado */
  --cp-perigo: #c0392b;
  --cp-sobre-perigo: #ffffff;
  --cp-atencao: #b7791f;
  --cp-atencao-suave: #fdf3e3;
  --cp-sucesso: #1e7f52;

  /* AS VARIANTES SUAVES sao fundo de azulejo de icone, e nao de texto: o par (suave, forte) da
     mesma cor e o que faz as caixas do painel se lerem como um conjunto em vez de quatro adesivos.
     Nenhuma delas recebe texto por cima - quem escreve sobre fundo suave usa a cor forte, e o
     contraste foi conferido nesse par. */
  --cp-sucesso-suave: #e6f4ec;
  --cp-perigo-suave: #fbeae8;

  /* séries de gráfico — NÃO são as cores de estado.
     Verde e âmbar deste tema ficam a distância 7,1 em protanopia, dentro da faixa em que duas
     linhas parecem da mesma cor. As três séries foram escolhidas como CONJUNTO e conferidas nos
     dois temas contra todos os pares: pior distância 9,2 no claro e 9,4 no escuro, contra mínimo
     de 8. Trocar uma delas sozinha desfaz a conferência. */
  --cp-serie-1: #2a78d6;
  --cp-serie-2: #eb6834;
  --cp-serie-3: #1baf7a;

  /* A QUARTA SERIE (o voucher, na barra das formas do painel), fora do conjunto conferido acima: violeta, longe dos
     tres em matiz. Ali a legenda escreve nome e valor ao lado de cada pedaco - a cor so liga o pedaco a linha dela, e
     nao e a unica informacao. */
  --cp-serie-4: #8a5cd6;

  /* LINHA SELECIONADA de uma lista. NÃO acompanha o tema, e por um motivo concreto: o azul que o
     Bootstrap pinta em .list-group-item.active é o mesmo nos dois temas. Um par que seguisse
     --cp-texto daria texto quase branco sobre fundo branco no escuro -- e o que já estava
     ilegível era justamente a contagem dentro da linha que a pessoa acabou de escolher. */
  --cp-sobre-selecao: #ffffff;
  --cp-selecao-texto: #0a4bb5;

  /* marca de terceiro: NÃO acompanha o tema — o único trabalho dela é ser reconhecida de relance.
     Mora aqui mesmo assim, porque a regra é "hexadecimal existe neste arquivo"; a exceção é não
     seguir o tema, não morar fora. */
  --cp-whatsapp: #25d366;

  /* medidas */
  --cp-raio: 10px;
  --cp-sidebar-largura: 17.5rem;

  /*
   * AS TONALIDADES DA AULA NA GRADE - e por que sao seis numeros e nao quarenta e cinco cores.
   *
   * Cada disciplina carrega um MATIZ (`--cp-aula-h`, posto pelo JavaScript). Fundo, fio e texto
   * saem dele com a saturacao e a luz destes tokens, entao vestir a grade no tema escuro e
   * redefinir seis valores logo abaixo - e nao reescolher a cor de cada materia.
   */
  --cp-aula-fundo-s: 72%;
  --cp-aula-fundo-l: 96%;
  --cp-aula-fio-s: 58%;
  --cp-aula-fio-l: 62%;
  --cp-aula-texto-s: 46%;
  --cp-aula-texto-l: 34%;
  --cp-navbar-altura: 3.25rem;
  --cp-rodape-altura: 2.25rem;

  /* A FAIXA FINA DO PDV MERCADORIAS (loja, terminal, operador, caixa): mais baixa que a barra do Admin, porque o PDV
     e a tela inteira da venda, e cada linha dela e item de carrinho a menos no visor de 768 px. */
  --cp-pdv-topo-altura: 2.75rem;
  --cp-fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cp-transicao: 120ms ease;

  /* O PAPEL DO CUPOM: branco e preto nos dois temas. E a imagem do papel termico que vai sair da impressora, e o QR
     Code so e lido com contraste - no tema escuro, um cupom escuro mentiria sobre o que imprime. */
  --cp-cupom-papel: #ffffff;
  --cp-cupom-tinta: #111111;
  --cp-cupom-fio: #9aa0a6;

  /* O CARDAPIO DIGITAL PUBLICO (cardapio.css) - tokens proprios, e nao os do Admin, por um motivo: a pagina e a vitrine
     da loja no celular de quem esta na mesa, e o cinza-azulado de ferramenta do Admin se le como sistema, nao como
     restaurante. Fundo em papel quente, tinta quase preta tambem quente, o verde da marca so no topo e no preco.
     O CONTRASTE FOI CALCULADO NOS PARES QUE LEVAM TEXTO (WCAG): tinta/papel 15,5:1, suave/papel 5,5:1, preco/cartao
     9,1:1, texto do topo/verde 8,6:1, suave do topo/verde 6,3:1 e o selo dos complementos 5,5:1 - AA em todos. O dourado
     e so fio e enfeite, nunca texto: sobre o verde ele daria 3:1. */
  --cdp-papel: #f7f3ec;
  --cdp-cartao: #ffffff;
  --cdp-cartao-2: #f1ebe0;
  --cdp-tinta: #1f1b16;
  --cdp-tinta-suave: #6a6157;
  --cdp-fio: #e7dfd2;
  --cdp-preco: #035338;
  --cdp-realce: #035338;
  --cdp-sobre-realce: #ffffff;
  --cdp-dourado: #b8945a;
  --cdp-topo-1: #035338;
  --cdp-topo-2: #012a1d;
  --cdp-topo-brilho: rgba(184, 148, 90, 0.22);
  --cdp-topo-texto: #fbf8f2;
  --cdp-topo-suave: #c9dbd2;
  --cdp-barra-fundo: rgba(247, 243, 236, 0.92);
  --cdp-sombra: rgba(52, 38, 18, 0.10);
  --cdp-sombra-forte: rgba(31, 22, 10, 0.22);
  --cdp-veu: rgba(20, 16, 10, 0.55);
  --cdp-marca-fundo: #e9f1ec;
  --cdp-marca-tinta: #2f6b52;
  --cdp-marca-risca: rgba(3, 83, 56, 0.07);
  --cdp-fonte-titulo: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --cdp-fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cdp-raio: 16px;
  --cdp-raio-foto: 12px;
}

[data-bs-theme='dark'] {
  /* No escuro o fundo desce e o texto sobe: a mesma cor que no claro e um pastel suave viraria uma
     mancha luminosa, e o titulo escuro por cima dela ficaria ilegivel. */
  --cp-aula-fundo-s: 32%;
  --cp-aula-fundo-l: 16%;
  --cp-aula-fio-s: 48%;
  --cp-aula-fio-l: 50%;
  --cp-aula-texto-s: 60%;
  --cp-aula-texto-l: 76%;

  --cp-fundo: #0f1216;
  --cp-superficie: #171b21;
  --cp-borda: #262c34;
  --cp-borda-forte: #333b45;

  --cp-texto: #e7eaee;
  --cp-texto-suave: #98a1ad;
  --cp-superficie-2: #1f242b;
  --cp-texto-apoio: #8b95a3;

  --cp-primaria: #4cc98f;
  --cp-primaria-suave: #10281e;
  --cp-sobre-primaria: #0f1216;
  --cp-marca-tinta: var(--cp-texto);
  --cp-marca-destaque: #1ed47e;
  --cp-marca-tracos: currentColor;


  --cp-sombra: rgba(0, 0, 0, 0.55);
  --cp-sombra-contato: rgba(0, 0, 0, 0.40);

  --cp-perigo: #f07167;
  --cp-sobre-perigo: #0f1216;   /* no escuro o vermelho é salmão: quem contrasta é o escuro */
  --cp-atencao: #e0a458;
  --cp-atencao-suave: #3a2f1c;
  --cp-sucesso: #56b98a;

  /* No escuro a variante suave e um tom ESCURO da mesma familia, e nao o claro do outro tema: um
     azulejo claro numa barra escura vira uma mancha, e era o defeito que a regra de tokens existe
     para impedir. */
  --cp-sucesso-suave: #16301f;
  --cp-perigo-suave: #33191a;

  --cp-serie-1: #3987e5;
  --cp-serie-2: #d95926;
  --cp-serie-3: #199e70;
  --cp-serie-4: #a07ce6;

  /* O CARDAPIO NO ESCURO: carvao quente, e nao o preto-azulado do Admin; o verde do preco sobe para ser lido (9,5:1 no
     cartao; suave/cartao 6,7:1, selo 7,9:1), e o topo desce a um verde de noite para nao virar a unica luz da tela. */
  --cdp-papel: #13120f;
  --cdp-cartao: #1c1a16;
  --cdp-cartao-2: #26231e;
  --cdp-tinta: #efe9df;
  --cdp-tinta-suave: #a9a094;
  --cdp-fio: #2e2a24;
  --cdp-preco: #6fd3a3;
  --cdp-realce: #6fd3a3;
  --cdp-sobre-realce: #0d1a14;
  --cdp-dourado: #c9a86e;
  --cdp-topo-1: #0b3a2a;
  --cdp-topo-2: #06170f;
  --cdp-topo-brilho: rgba(201, 168, 110, 0.14);
  --cdp-topo-texto: #f3eee6;
  --cdp-topo-suave: #b4c7bd;
  --cdp-barra-fundo: rgba(19, 18, 15, 0.9);
  --cdp-sombra: rgba(0, 0, 0, 0.35);
  --cdp-sombra-forte: rgba(0, 0, 0, 0.6);
  --cdp-veu: rgba(0, 0, 0, 0.66);
  --cdp-marca-fundo: #1d2a23;
  --cdp-marca-tinta: #8fc9ab;
  --cdp-marca-risca: rgba(143, 201, 171, 0.06);
}

/*
 * Desligamento global de movimento.
 *
 * O !important existe para alcançar bibliotecas que animam por ESTILO INLINE — SweetAlert2 e
 * Toastify escrevem transição direto no elemento, e a media query sozinha não chega lá.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /*
   * O AVISO DE CARREGANDO É EXCEÇÃO, e é a única.
   *
   * VALE PARA O INDICADOR DO DATATABLES TAMBÉM: as bolinhas dele animam por keyframes próprios, e
   * a regra `*` acima as congelava do mesmo jeito -- a grade ficaria com pontos parados sobre as
   * linhas, que se lê como tela travada, e não como "espere".
   *
   * O resto do movimento daqui é enfeite: quem pede menos movimento não perde informação nenhuma
   * quando um brilho para. O spinner não — ele É a informação. Parado, ele não diz "menos
   * movimento", diz "travou": a pessoa fica olhando um círculo imóvel sem saber se espera ou se
   * fecha a tela. Foi o que o `*` acima causou, primeiro no ícone do FontAwesome e depois no
   * spinner do Bootstrap que veio no lugar dele.
   *
   * 1,5s é a medida que o próprio Bootstrap usa neste caso: o dobro do normal, devagar o bastante
   * para não incomodar quem pediu calma, e vivo o bastante para dizer que há trabalho em curso.
   */
  .spinner-border,
  .spinner-grow,
  div.dt-processing > div:last-child > div {
    animation-duration: 1.5s !important;
    animation-iteration-count: infinite !important;
  }

  /*
   * A OUTRA EXCEÇÃO NÃO ESTÁ AQUI, e fica registrada para quem vier ler a política de movimento
   * neste arquivo: a barra do cronômetro do aviso (`.cp-toast__progresso`) se impõe pelo próprio
   * JavaScript, com estilo inline importante -- ver `Cp.aviso` em js/cp.js.
   *
   * O motivo de ela não morar nesta regra é a DURAÇÃO: o número vive no JavaScript, que precisa
   * dele para o temporizador do Toastify. Repeti-lo aqui criaria dois valores que precisam
   * concordar, e o primeiro ajuste desfaria o acordo -- a barra terminaria antes ou depois do
   * cartão que ela mede.
   *
   * O raciocínio é o mesmo do spinner logo acima: parada, ela não fica neutra, ela mente.
   */
}