/*
 * TEMA: o único lugar com código de cor. Três níveis (docs/design/missao-cores/03-taxonomia.md, seção 4):
 *   1. bruto       --bruto-<família>-<tom>          guarda o código da cor; só este arquivo usa
 *   2. papel       --papel-<identificador>[-parte]  diz o significado; aponta para um bruto, nunca para outro papel
 *   3. componente  --comp-<componente>-<parte>      diz onde é aplicado; aponta para um papel, nunca para um bruto
 * As telas (panel.css, shop.css) usam os tokens de componente e, quando não há um, os de papel. Nunca os brutos.
 * Um teste (tests/17-theme.test.ts) segue a cadeia até o bruto e mede o contraste de cada par usado.
 * Regras do dono: fundo claro; o âmbar é só o preenchimento do botão principal; nenhum amarelo em estado;
 * nenhuma cor nem símbolo do Pix (só a palavra, em texto).
 */
:root {
  /* ---- 1. brutos ---- */
  --bruto-neutro-0: #FFFFFF;
  --bruto-neutro-50: #F5F7F8;
  --bruto-neutro-100: #E3E8EB;
  --bruto-neutro-500: #6F7B83;
  --bruto-neutro-700: #5B6770;
  --bruto-neutro-900: #17212B;
  --bruto-agua-50: #EAFBF7;
  --bruto-agua-300: #20E3C2;
  --bruto-agua-700: #0A7F6D;
  --bruto-ambar-500: #FFB020;
  --bruto-ambar-600: #F0A30F;
  --bruto-verde-50: #E3F3EA;
  --bruto-verde-800: #14602A;
  --bruto-vermelho-50: #FBE9E7;
  --bruto-vermelho-800: #A61B1B;
  /* séries de gráfico e cores de loja repetem códigos de propósito: não unificar */
  --bruto-dados-1: #3A3F47;
  --bruto-dados-2: #1D5FBF;
  --bruto-dados-3: #0A7F6D;
  --bruto-dados-4: #6B3FA0;
  --bruto-loja-agua: #0A7F6D;
  --bruto-loja-azul: #1D5FBF;
  --bruto-loja-roxo: #6B3FA0;
  --bruto-loja-grafite: #3A3F47;

  /* ---- 2. papéis ---- */
  --papel-fundo: var(--bruto-neutro-0);
  --papel-superficie: var(--bruto-neutro-0);
  --papel-fundo-de-apoio: var(--bruto-neutro-50);
  --papel-fundo-de-apoio-pressionado: var(--bruto-neutro-100);
  --papel-texto: var(--bruto-neutro-900);
  --papel-texto-de-apoio: var(--bruto-neutro-700);
  --papel-linha: var(--bruto-neutro-100);
  --papel-contorno-de-controle: var(--bruto-neutro-500);
  --papel-marca: var(--bruto-agua-700);
  --papel-marca-enfeite: var(--bruto-agua-300);
  --papel-marca-enfeite-sobre: var(--bruto-neutro-900);
  --papel-acao-principal: var(--bruto-ambar-500);
  --papel-acao-principal-sobre: var(--bruto-neutro-900);
  --papel-acao-principal-pressionado: var(--bruto-ambar-600);
  --papel-acao-secundaria: var(--bruto-agua-700);
  --papel-perigo: var(--bruto-vermelho-800);
  --papel-selecao: var(--bruto-agua-700);
  --papel-selecao-fundo: var(--bruto-agua-50);
  --papel-foco: var(--bruto-neutro-900);
  --papel-promocao: var(--bruto-neutro-900);
  --papel-promocao-sobre: var(--bruto-neutro-0);
  --papel-preco: var(--bruto-neutro-900);
  --papel-sucesso: var(--bruto-verde-800);
  --papel-sucesso-fundo: var(--bruto-verde-50);
  --papel-sucesso-sobre: var(--bruto-neutro-0);
  --papel-erro: var(--bruto-vermelho-800);
  --papel-erro-sobre: var(--bruto-neutro-0);
  --papel-erro-fundo: var(--bruto-vermelho-50);
  --papel-espera: var(--bruto-neutro-700);
  --papel-informacao: var(--bruto-neutro-900);
  --papel-com-voce: var(--bruto-neutro-900);
  --papel-fato-fundo: var(--bruto-neutro-50);
  --papel-indisponivel: var(--bruto-neutro-700);
  --papel-desabilitado-fundo: var(--bruto-neutro-50);
  --papel-desabilitado-texto: var(--bruto-neutro-700);
  --papel-cor-de-loja: var(--bruto-loja-agua);
  --papel-cor-de-loja-sobre: var(--bruto-neutro-0);
  --papel-dado-e-grafico-1: var(--bruto-dados-1);
  --papel-dado-e-grafico-2: var(--bruto-dados-2);
  --papel-dado-e-grafico-3: var(--bruto-dados-3);
  --papel-dado-e-grafico-4: var(--bruto-dados-4);

  /* ---- 3. componentes (valor de base: o do painel) ---- */
  --comp-botao-principal-fundo: var(--papel-acao-principal);
  --comp-botao-principal-texto: var(--papel-acao-principal-sobre);
  --comp-botao-principal-fundo-pressionado: var(--papel-acao-principal-pressionado);
  --comp-botao-secundario-fundo: var(--papel-superficie);
  --comp-botao-secundario-texto: var(--papel-acao-secundaria);
  --comp-botao-secundario-contorno: var(--papel-acao-secundaria);
  --comp-botao-neutro-fundo: var(--papel-fundo-de-apoio);
  --comp-botao-neutro-texto: var(--papel-texto);
  --comp-botao-neutro-contorno: var(--papel-contorno-de-controle);
  --comp-botao-neutro-fundo-pressionado: var(--papel-fundo-de-apoio-pressionado);
  --comp-botao-perigo-fundo: var(--papel-superficie);
  --comp-botao-perigo-texto: var(--papel-perigo);
  --comp-botao-perigo-contorno: var(--papel-perigo);
  --comp-botao-desligado-fundo: var(--papel-desabilitado-fundo);
  --comp-botao-desligado-texto: var(--papel-desabilitado-texto);
  --comp-selo-fato-fundo: var(--papel-fato-fundo);
  --comp-selo-fato-texto: var(--papel-texto);
  --comp-selo-espera-fundo: var(--papel-superficie);
  --comp-selo-espera-contorno: var(--papel-espera);
  --comp-selo-espera-icone: var(--papel-texto);
  --comp-selo-espera-texto: var(--papel-texto);
  --comp-selo-com-voce-fundo: var(--papel-superficie);
  --comp-selo-com-voce-contorno: var(--papel-com-voce);
  --comp-selo-com-voce-icone: var(--papel-texto);
  --comp-selo-com-voce-texto: var(--papel-texto);
  --comp-selo-sucesso-fundo: var(--papel-sucesso-fundo);
  --comp-selo-sucesso-icone: var(--papel-sucesso);
  --comp-selo-sucesso-texto: var(--papel-texto);
  --comp-selo-erro-fundo: var(--papel-erro);
  --comp-selo-erro-texto: var(--papel-erro-sobre);
  --comp-selo-erro-icone: var(--papel-erro-sobre);
  --comp-etiqueta-oferta-fundo: var(--papel-promocao);
  --comp-etiqueta-oferta-texto: var(--papel-promocao-sobre);
  --comp-mensagem-sucesso-fundo: var(--papel-sucesso-fundo);
  --comp-mensagem-sucesso-icone: var(--papel-sucesso);
  --comp-mensagem-sucesso-texto: var(--papel-texto);
  --comp-mensagem-erro-fundo: var(--papel-erro-fundo);
  --comp-mensagem-erro-contorno: var(--papel-erro);
  --comp-mensagem-erro-icone: var(--papel-erro);
  --comp-mensagem-erro-texto: var(--papel-texto);
  --comp-mensagem-informacao-fundo: var(--papel-fundo-de-apoio);
  --comp-mensagem-informacao-icone: var(--papel-informacao);
  --comp-mensagem-informacao-texto: var(--papel-informacao);
  --comp-campo-fundo: var(--papel-superficie);
  --comp-campo-contorno: var(--papel-contorno-de-controle);
  --comp-campo-texto: var(--papel-texto);
  --comp-campo-contorno-foco: var(--papel-foco);
  --comp-cartao-fundo: var(--papel-superficie);
  --comp-cartao-contorno: var(--papel-linha);
  --comp-cartao-pedido-contorno: var(--papel-com-voce);
  --comp-passo-fundo: var(--papel-sucesso);
  --comp-passo-icone: var(--papel-sucesso-sobre);
  --comp-passo-contorno: var(--papel-com-voce);
  --comp-passo-texto: var(--papel-texto);
  --comp-opcao-contorno: var(--papel-contorno-de-controle);
  --comp-opcao-contorno-escolhido: var(--papel-selecao);
  --comp-opcao-fundo-escolhido: var(--papel-selecao-fundo);
  --comp-aba-texto: var(--papel-texto-de-apoio);
  --comp-aba-texto-escolhido: var(--papel-marca);
  --comp-barra-de-navegacao-texto: var(--papel-texto-de-apoio);
  --comp-barra-de-navegacao-texto-escolhido: var(--papel-marca);
  --comp-link-texto: var(--papel-marca);
  --comp-resumo-numero-fundo: var(--papel-fundo-de-apoio);
  --comp-resumo-numero-texto: var(--papel-texto);
  --comp-linha-de-menu-texto: var(--papel-texto);
  --comp-codigo-de-entrega-texto: var(--papel-texto);
  --comp-codigo-de-entrega-contorno: var(--papel-com-voce);
  --comp-nota-contorno: var(--papel-contorno-de-controle);
  --comp-nota-contorno-escolhido: var(--papel-cor-de-loja);
  --comp-linha-do-tempo-texto: var(--papel-texto);
  --comp-quadro-do-qr-fundo: var(--papel-superficie);
  --comp-imagem-de-reserva-fundo: var(--papel-fundo-de-apoio);
  --comp-imagem-de-reserva-texto: var(--papel-texto-de-apoio);
  --comp-grafico-serie-1: var(--papel-dado-e-grafico-1);
  --comp-grafico-serie-2: var(--papel-dado-e-grafico-2);
  --comp-grafico-serie-3: var(--papel-dado-e-grafico-3);
  --comp-grafico-serie-4: var(--papel-dado-e-grafico-4);
}

/*
 * ESCOPOS (lista fechada: taxonomia 4.1). Num escopo o MESMO token aponta para outro bruto que já existe; não nasce
 * token com nome de lugar. Como o navegador resolve cada variável no elemento em que ela é declarada, todo token
 * de componente que depende de um papel trocado é declarado de novo dentro do escopo.
 */

/* Cor de loja: vitrine, página do pedido e avaliação. A classe troca o bruto do papel. */
.cor-agua    { --papel-cor-de-loja: var(--bruto-loja-agua); }
.cor-azul    { --papel-cor-de-loja: var(--bruto-loja-azul); }
.cor-roxo    { --papel-cor-de-loja: var(--bruto-loja-roxo); }
.cor-grafite { --papel-cor-de-loja: var(--bruto-loja-grafite); }
.cor-agua, .cor-azul, .cor-roxo, .cor-grafite {
  --comp-botao-secundario-texto: var(--papel-cor-de-loja);
  --comp-botao-secundario-contorno: var(--papel-cor-de-loja);
  --comp-opcao-contorno-escolhido: var(--papel-cor-de-loja);
  --comp-opcao-fundo-escolhido: var(--papel-superficie);
  --comp-link-texto: var(--papel-cor-de-loja);
  --comp-nota-contorno-escolhido: var(--papel-cor-de-loja);
}

/* Grafite: todo o link do entregador e toda zona de pagamento. Ganha da vitrine: vem depois e fica mais perto. */
.escopo-grafite {
  --papel-acao-secundaria: var(--bruto-neutro-900);
  --papel-selecao: var(--bruto-neutro-900);
  --comp-botao-secundario-texto: var(--papel-acao-secundaria);
  --comp-botao-secundario-contorno: var(--papel-acao-secundaria);
  --comp-opcao-contorno-escolhido: var(--papel-selecao);
  --comp-opcao-fundo-escolhido: var(--papel-superficie);
  --comp-link-texto: var(--papel-texto);
}

/* Dentro de fundo de apoio (bloco de número): o selo de fato não pode sumir no gelo. */
.escopo-apoio {
  --papel-fato-fundo: var(--bruto-neutro-100);
  --comp-selo-fato-fundo: var(--papel-fato-fundo);
}