/* Um arquivo so de tokens para os tres aplicativos. Trocar a identidade do
   sistema inteiro e mexer aqui, em nenhum outro lugar. */
:root {
  color-scheme: light dark;

  /* ---------- as camadas, em um lugar so ----------
   *
   * Numero solto em arquivo separado nao se compara com numero solto em outro,
   * e foi assim que o menu do celular (70) nasceu abaixo do painel do mapa
   * (1100): abrir o menu na tela de operacao deixava o mapa por cima da
   * navegacao. O Leaflet e quem forca a escala alta -- ele desenha os proprios
   * paines em 400 e os controles em 1000, e nao adianta discutir com ele.
   *
   * A ordem, de baixo para cima: o que e conteudo, o que flutua sobre o
   * conteudo, o que navega, o que interrompe. Navegacao sempre por cima de
   * conteudo; janela que pede resposta, por cima de tudo.
   */
  --camada-sugestoes: 20;    /* lista que abre embaixo de um campo */
  --camada-topo: 60;         /* barra fixa do topo */
  --camada-mapa-painel: 1100;/* painel que flutua sobre o mapa */
  --camada-mapa-botao: 1101; /* o botao de recolher esse painel */
  --camada-menu-fundo: 1499; /* o escurecido atras do menu do celular */
  --camada-menu: 1500;       /* o menu que desliza */
  --camada-janela: 2000;     /* a janela que pede resposta */

  /* ---------- a Booh, tema claro ----------
   *
   * O tema claro NAO estava na marca: ela foi desenhada escura, sobre o Breu.
   * Estes valores sairam de medicao, e nao de gosto, porque a menta e uma cor
   * CLARA e isso muda tudo aqui:
   *
   *   menta sobre branco ............ 1,39  reprova
   *   Esmeralda sobre branco ........ 2,17  reprova
   *   Nevoa sobre branco ............ 1,90  reprova
   *
   * Ou seja: no tema claro a menta so serve como PREENCHIMENTO, nunca como cor
   * de texto, link ou icone -- e a Nevoa nao serve de texto fraco. Faltava um
   * verde legivel, e a paleta da marca nao tem um.
   */
  --cor-fundo: #f4f8f6;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #eaf3ee;
  --cor-borda: #cddfd6;
  --cor-texto: #061310;            /* Breu, 18,95 */
  --cor-texto-fraco: #54786c;      /* 4,58 no fundo, 4,91 na superficie */
  /* VERDE DERIVADO, e nao inventado: e a Esmeralda (#12C97E) no mesmo matiz
     155,4 e mesma saturacao 84%, levada de 43% para 28,5% de claridade -- o
     ponto em que ela passa 4,5 nos DOIS sentidos (4,67 sobre branco, e branco
     4,67 sobre ela), entao um valor so serve para texto e para botao.
     Trocar por um hex oficial quando a marca definir o verde do tema claro. */
  --cor-primaria: #0c8554;
  --cor-primaria-forte: #096942;
  --cor-primaria-suave: #e3fbee;
  /* Cor do texto em cima da primaria. No claro, branco; no escuro, o proprio
     fundo escuro, porque azul e verde claros com texto branco nao alcancam
     4.5:1 e a tela fica ilegivel no sol.
     A Booh confirma a regra com numero: branco sobre a menta da 1,39. */
  --cor-texto-botao: #ffffff;      /* 4,67 sobre a primaria */
  /* Sucesso no verde ESCURO, e nao no mesmo da primaria: o claro dava 4,29
     sobre o fundo suave (minimo 4,5), e de quebra isto separa "confirmar" de
     "concluido", que numa marca verde sairiam identicos. */
  --cor-sucesso: #096942;
  --cor-sucesso-suave: #e3fbee;
  --cor-alerta: #96450a;
  --cor-alerta-suave: #fdf1de;
  --cor-erro: #b42318;
  --cor-erro-suave: #fdeceb;

  /* ---------- as etapas do pedido ----------
   *
   * Cor propria, e nao emprestada dos papeis (primaria, alerta, sucesso). A
   * primeira versao emprestava, e quebrou onde mais importava: no tema escuro
   * do ADM, --cor-alerta e --cor-primaria sao o MESMO amarelo, entao "chamando"
   * e "em rota" ficavam indistinguiveis -- e no tema do entregador a primaria e
   * igual a de sucesso.
   *
   * Papel e etapa sao coisas diferentes: a primaria muda com a marca de cada
   * acesso, a etapa do pedido nao. Emprestar amarrava uma na outra.
   *
   * Servem a lista da operacao E aos alfinetes do mapa, para o cartao e o ponto
   * do mesmo pedido terem a mesma cor. */
  --cor-etapa-espera: #5b6472;    /* agendado: espera a hora, nao a pessoa */
  /* Ambar escolhido por medida, e nao por gosto: o primeiro (#b45309) ficava a
     50 de distancia do vermelho de cancelado, e numa barra de 3px os dois viram
     o mesmo marrom. Este esta a 75, e continua sendo laranja. */
  --cor-etapa-chamando: #aa6900;  /* precisa de entregador agora */
  /* As tres fases do entregador sao uma PROGRESSAO no mesmo azul, e nao tres
     cores sem parentesco: elas sao o mesmo macro-estado -- esta com alguem, na
     rua -- e ler um caminho que escurece e mais facil do que decorar tres
     cores. Escolhidas por medida: cada par a pelo menos 30 de distancia, e
     todas a 60 das outras familias. */
  --cor-etapa-aceito: #6b8fd8;
  --cor-etapa-coleta: #4a7ad0;
  --cor-etapa-rota: #1d4ed8;      /* coletado: saiu para o cliente */
  /* VOLTANDO e familia propria, e nao uma quarta fase do azul: o pedido esta
     com alguem, na rua, mas indo para TRAS. Quem le a progressao do azul le
     "esta a caminho do cliente", e essa e a unica coisa que aqui e falsa.

     O roxo nao foi escolha de gosto. Varri os 72 matizes contra as cinco
     familias e as duas outras fases, nos dois temas: a faixa 270-320 e a unica
     livre. Medido, o claro fica a 107 da familia mais proxima (rota) e 6,98:1
     sobre a superficie; o escuro, a 90 (espera) e 83 de 'aceito', que era o
     aperto -- roxo claro demais encosta no azul claro do aceito. */
  --cor-etapa-voltando: #7e22ce;
  --cor-etapa-fim: #0b6c3c;
  --cor-etapa-cancelada: #b42318;

  --espaco-1: .25rem;
  --espaco-2: .5rem;
  --espaco-3: .75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;

  --raio-1: .375rem;
  --raio-2: .625rem;
  --raio-3: 1rem;
  --raio-cheio: 999px;

  --sombra-1: 0 1px 2px rgba(16, 21, 28, .06);
  --sombra-2: 0 4px 16px rgba(16, 21, 28, .10);

  /* Montserrat 800 para nome e titulos, 500 para apoio e texto -- a regra da
     marca. Servida por nos (web/assets/fontes), e NUNCA de CDN: a varredura
     import-de-fora existe porque uma dependencia externa deixou o aplicativo
     instalado morto por dois dias, abrindo e ficando em carregando sem erro. */
  --fonte: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fonte-numero: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --largura-maxima: 72rem;
  --altura-toque: 2.75rem;
}

/* NAO HA MAIS SOTAQUE POR APLICATIVO.
 *
 * Os tres aplicativos tinham primaria propria -- azul no PDV, verde no
 * entregador, ambar no ADM. A marca Booh tem um acento so, e e o verde do
 * icone: "Nenhuma frente ganha cor propria". O que separa uma tela da outra
 * passa a ser o conteudo e o icone, nao a cor.
 */

[data-tema="escuro"] {
  /* ---------- a Booh, tema escuro: a marca como ela foi desenhada ----------
   *
   * Aqui nao houve escolha a fazer -- a marca ja resolveu, e bem: tudo AAA
   * sobre o Breu (branco 18,95, Menta Clara 15,82, menta 13,68, Nevoa 9,97).
   */
  --cor-fundo: #061310;            /* Breu */
  --cor-superficie: #0b1f17;
  --cor-superficie-2: #0e2a20;
  --cor-borda: #1b4034;
  --cor-texto: #ffffff;
  --cor-texto-fraco: #9fc4b6;      /* Nevoa, 9,03 na superficie */
  --cor-primaria: #55f79a;         /* Menta Booh */
  --cor-primaria-forte: #9bffc8;   /* Menta Clara */
  --cor-primaria-suave: #0b2a1e;   /* Verde Profundo */
  /* TEXTO DO BOTAO EM BREU, e nao em branco. Branco sobre a menta da 1,39 --
     texto invisivel. Era a mudanca mais facil de errar nesta marca, e a que
     tests/contraste.test.mjs barra. */
  --cor-texto-botao: #061310;      /* 13,68 sobre a menta */
  --cor-sucesso: #55f79a;
  --cor-sucesso-suave: #0b2a1e;
  --cor-alerta: #f0b429;
  --cor-alerta-suave: #2a2113;
  --cor-erro: #ff6b6b;
  --cor-erro-suave: #2b1717;

  --cor-etapa-espera: #9aa7b8;
  --cor-etapa-chamando: #f0b429;
  --cor-etapa-aceito: #9dbaff;
  --cor-etapa-coleta: #7aa2ff;
  --cor-etapa-rota: #5b8cff;
  --cor-etapa-voltando: #d07af0;
  --cor-etapa-fim: #3ecf8e;
  --cor-etapa-cancelada: #ff6b6b;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 6px 20px rgba(0, 0, 0, .5);
}

/* A fonte da marca, servida daqui e nao de CDN.
 *
 * UM ARQUIVO SO, e de proposito: o Montserrat do Google e fonte VARIAVEL -- o
 * mesmo woff2 atende toda a faixa de peso, e por isso ele e declarado com
 * font-weight 100 900 em vez de um @font-face por peso. Dois arquivos seriam o
 * mesmo arquivo baixado duas vezes.
 *
 * Subconjunto latino: o portugues cabe nele inteiro (a, e, i, o, u com todos os
 * acentos, c com cedilha). O latin-ext existe para romeno e polones, e sao mais
 * 30 KB na mao de quem abre o aplicativo em rede de borda de cidade.
 *
 * swap: o texto aparece na hora com a fonte de reserva e troca quando a da
 * marca chega. O contrario -- esperar a fonte para mostrar texto -- e tela
 * branca para quem tem rede ruim, que e justamente o entregador.
 */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fontes/montserrat-latin.woff2) format('woff2');
}