/**
 * GERADO por projects/ds/tokens/build.mjs a partir de projects/ds/tokens/**.json.
 * NÃO edite à mão: a próxima build sobrescreve. Mexa no JSON e rode
 * `npm run tokens`.
 *
 * Sem carimbo de data de propósito: o CI roda a build e compara o resultado com
 * o que está versionado, para pegar quem mexeu no JSON e esqueceu de gerar. Uma
 * data no cabeçalho faria esse diff acusar diferença a cada execução, e a
 * verificação morreria de falso positivo no primeiro dia.
 */
:root {
  color-scheme: light;

  --rp-grafico-1: #5b6bd6; /* aguardando */
  --rp-grafico-2: #0e98b3; /* em analise */
  --rp-grafico-3: #c48300; /* com pendencia (no tema escuro desce para #b07600) */
  --rp-grafico-4: #0eaa70; /* deferido. Era #14ae5c, o verde antigo do app */
  --rp-verde-50: #e5feef; /* superficie mint clara */
  --rp-verde-100: #c8fddf; /* halo do hero, fundo de selo */
  --rp-verde-200: #7cfcbc; /* sublinhado do hero, barra de progresso */
  --rp-verde-300: #5ae5a4; /* acento e botao no tema escuro, com texto ink em cima */
  --rp-verde-400: #3dc88b; /* texto, icone e foco no tema ESCURO (6,89:1 sobre a pagina escura) */
  --rp-verde-500: #0eaa70; /* A MARCA. Preenchimento e acento. NAO serve como texto: 3,00:1 sobre branco */
  --rp-verde-600: #2a9163; /* icone e borda significativa no tema claro (3,96:1) */
  --rp-verde-700: #227b54; /* texto verde, link e anel de foco no claro (5,21:1). Unico passo que passa 4,5:1 nas tres superficies claras E aceita texto branco em cima */
  --rp-verde-800: #196141; /* hover de link e de texto verde */
  --rp-verde-900: #0f452d; /* selo escuro, borda no tema escuro */
  --rp-verde-950: #072d1c; /* fundo de secao escura */
  --rp-controle-sm: 32px; /* so com ponteiro fino */
  --rp-controle-md: 40px; /* padrao */
  --rp-controle-lg: 44px; /* padrao sob ponteiro grosso, e alvo minimo de toque */
  --rp-linha-compacta: 32px;
  --rp-linha-padrao: 40px;
  --rp-linha-toque: 48px;
  --rp-foco-largura: 2px;
  --rp-foco-deslocamento: 2px; /* o halo na cor da superficie e o que garante 3:1 quando o anel encosta num botao escuro */
  --rp-largura-leitura: 72ch; /* medida de paragrafo */
  --rp-largura-conteudo: 1180px; /* alinhado ao .wrap da landing aprovada */
  --rp-espaco-0: 0;
  --rp-espaco-1: 2px; /* ajuste optico, nao espacamento */
  --rp-espaco-2: 4px;
  --rp-espaco-3: 8px;
  --rp-espaco-4: 12px;
  --rp-espaco-5: 16px;
  --rp-espaco-6: 20px;
  --rp-espaco-7: 24px;
  --rp-espaco-8: 32px;
  --rp-espaco-9: 40px;
  --rp-espaco-10: 48px;
  --rp-espaco-11: 64px;
  --rp-espaco-12: 80px;
  --rp-espaco-13: 96px;
  --rp-duracao-rapida: 150ms; /* hover, foco, estado de botao */
  --rp-duracao-base: 200ms; /* abrir e fechar, troca de aba */
  --rp-duracao-lenta: 300ms; /* painel lateral, modal */
  --rp-duracao-reveal: 450ms; /* entrada ao rolar */
  --rp-curva-padrao: cubic-bezier(0.2, 0, 0.2, 1); /* entra e sai */
  --rp-curva-saida: cubic-bezier(0.16, 1, 0.3, 1); /* desacelera no fim, para conteudo que aparece */
  --rp-curva-entrada: cubic-bezier(0.5, 0, 1, 1); /* acelera, para conteudo que sai de cena */
  --rp-raio-xs: 4px; /* selo pequeno, codigo em linha */
  --rp-raio-sm: 8px; /* campo de formulario */
  --rp-raio-md: 12px; /* botao, card interno */
  --rp-raio-lg: 16px; /* card, painel */
  --rp-raio-xl: 22px; /* secao e modal. E o raio da landing aprovada */
  --rp-raio-pill: 999px; /* selo, contador, interruptor */
  --rp-fonte-corpo: 'DM Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --rp-fonte-display: Manrope, 'DM Sans', ui-sans-serif, system-ui, Arial, sans-serif;
  --rp-fonte-numero: Manrope, 'DM Sans', ui-sans-serif, system-ui, Arial, sans-serif; /* sempre acompanhado de font-variant-numeric: tabular-nums lining-nums */
  --rp-fonte-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --rp-peso-normal: 400;
  --rp-peso-medio: 500;
  --rp-peso-semibold: 600;
  --rp-peso-bold: 700;
  --rp-peso-extrabold: 800; /* so em titulo de display */
  --rp-texto-xs: 11px; /* eyebrow, legenda de tabela */
  --rp-texto-sm: 12px; /* rotulo, texto auxiliar */
  --rp-texto-md: 14px; /* BASE do app e do Admin */
  --rp-texto-lg: 16px; /* base de pagina de leitura */
  --rp-texto-xl: 20px;
  --rp-texto-2xl: 24px;
  --rp-texto-3xl: 32px;
  --rp-entrelinha-apertada: 1.15; /* titulo de display */
  --rp-entrelinha-titulo: 1.25;
  --rp-entrelinha-confortavel: 1.5; /* interface */
  --rp-entrelinha-leitura: 1.6; /* paragrafo */
  --rp-cor-texto-padrao: #102d27; /* 14,72:1 sobre branco */
  --rp-cor-texto-forte: #2c423d; /* rotulo de enfase, h4 */
  --rp-cor-texto-suave: #465a55; /* texto secundario e rotulo (7,0:1) */
  --rp-cor-texto-tenue: #60736e; /* legenda e nota de rodape. Era #6b807a na proposta de 11/09, que reprovava: 4,21:1 no card e 4,12:1 na pagina, contra o minimo de 4,5 que legenda exige por ser TEXTO. Escurecido preservando a cromaticidade (mesma proporcao entre canais lineares), o que mantem o matiz */
  --rp-cor-texto-marca: #227b54; /* link e texto verde */
  --rp-cor-texto-erro: #c62839;
  --rp-cor-texto-aviso: #a16207;
  --rp-cor-texto-sobre-marca: #ffffff; /* texto em cima do verde 700, 5,21:1 */
  --rp-cor-texto-sobre-acao: #fbfdfc; /* texto em cima do botao primario escuro */
  --rp-cor-fundo-pagina: #fbfdfc;
  --rp-cor-fundo-superficie: #ffffff; /* card, tabela, modal */
  --rp-cor-fundo-discreto: #f2f7f5; /* cabecalho de tabela, campo inativo, codigo */
  --rp-cor-fundo-mint: #e5feef; /* destaque calmo, faixa de recomendacao */
  --rp-cor-fundo-marca: #0eaa70; /* preenchimento, acento e grafico */
  --rp-cor-fundo-erro: #fdeef0;
  --rp-cor-fundo-aviso: #fdf6e3;
  --rp-cor-fundo-sobreposicao: rgba(2, 14, 11, 0.55); /* atras do modal. Preto tingido de verde-agua, e NAO um primitivo da escala: --rp-verde-950 (#072d1c) tem luminancia ~35 e a pagina escura ~25, entao usa-lo como escurecedor CLAREAVA a tela no tema escuro */
  --rp-cor-acao-primaria: #102d27; /* botao primario. 14,72:1 com texto branco */
  --rp-cor-acao-primaria-hover: #2c423d;
  --rp-cor-acao-confirmar: #227b54; /* confirmacao; aceita texto branco */
  --rp-cor-acao-confirmar-hover: #196141;
  --rp-cor-borda-padrao: #dce8e1; /* card e divisor */
  --rp-cor-borda-suave: #eaf1ee; /* divisor interno de tabela */
  --rp-cor-borda-campo: #80908c; /* borda de campo, que precisa de 3:1 contra o fundo */
  --rp-cor-borda-marca: #2a9163; /* borda significativa e campo em foco */
  --rp-cor-foco-anel: #227b54; /* o padrao do Bootstrap (rgba(primary,.25)) da 1,30:1 e o da landing 1,21:1; os dois reprovam o minimo de 3:1 */
  --rp-cor-foco-halo: #fbfdfc; /* segunda cor da tecnica do W3C: garante contraste quando o anel encosta num botao escuro */
  --rp-sombra-1: 0 1px 2px 0 rgba(16, 45, 39, 0.05), 0 2px 6px 0 rgba(16, 45, 39, 0.05); /* card em repouso. Tingida pelo ink, nao cinza neutro */
  --rp-sombra-2: 0 4px 12px 0 rgba(16, 45, 39, 0.07), 0 12px 32px 0 rgba(16, 45, 39, 0.07); /* card elevado, menu suspenso */
  --rp-sombra-3: 0 8px 24px 0 rgba(16, 45, 39, 0.10), 0 24px 56px 0 rgba(16, 45, 39, 0.08); /* painel lateral */
  --rp-sombra-4: 0 30px 90px 0 rgba(0, 26, 32, 0.20); /* modal sobre o fundo escurecido */
}

/* Quem não escolheu tema segue o sistema. O :not([data-theme="light"]) é o que
   permite a escolha explícita do claro vencer a preferência do sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --rp-grafico-3: #b07600; /* o ambar do claro fica claro demais sobre fundo escuro e estoura a faixa de luminosidade aceitavel */
    --rp-cor-texto-padrao: #f2f7f5;
    --rp-cor-texto-forte: #dbe7e3;
    --rp-cor-texto-suave: #a6b5b1;
    --rp-cor-texto-tenue: #8ea19b; /* legenda. Era #8a9c97 na proposta de 11/09, que dava 4,34:1 sobre a faixa mint escura -- abaixo do minimo de 4,5 que legenda exige. Clareado em vez de escurecer a faixa: clarear custa 1,1 ponto de L* na distancia com o texto.suave, e escurecer a faixa custaria 1,2 dos 5,3 pontos que a separam da superficie, que e pouco para uma faixa ja sutil */
    --rp-cor-texto-marca: #3dc88b; /* 6,89:1 sobre a pagina escura */
    --rp-cor-texto-erro: #f08a95;
    --rp-cor-texto-aviso: #e2b04a;
    --rp-cor-texto-sobre-marca: #091e19; /* no escuro o verde e claro, entao o texto em cima dele e o ink */
    --rp-cor-texto-sobre-acao: #091e19;
    --rp-cor-fundo-pagina: #091e19;
    --rp-cor-fundo-superficie: #102d27; /* o ink do tema claro */
    --rp-cor-fundo-discreto: #16352e;
    --rp-cor-fundo-mint: #0f3b28;
    --rp-cor-fundo-marca: #3dc88b;
    --rp-cor-fundo-erro: #3a2427;
    --rp-cor-fundo-aviso: #33301f;
    --rp-cor-fundo-sobreposicao: rgba(0, 6, 5, 0.66); /* atras do modal. Mais forte que no claro: aqui a distancia de luminancia entre o painel e a pagina e menor, entao um veu fraco nao separa os dois */
    --rp-cor-acao-primaria: #5ae5a4; /* no escuro o botao primario e claro, com texto ink */
    --rp-cor-acao-primaria-hover: #7cfcbc;
    --rp-cor-acao-confirmar: #5ae5a4;
    --rp-cor-acao-confirmar-hover: #7cfcbc;
    --rp-cor-borda-padrao: #26443c;
    --rp-cor-borda-suave: #1d3a32;
    --rp-cor-borda-campo: #80908c; /* o mesmo valor do claro: e o unico tom que fica a 3:1 dos DOIS fundos */
    --rp-cor-borda-marca: #3dc88b;
    --rp-cor-foco-anel: #3dc88b;
    --rp-cor-foco-halo: #091e19;
    --rp-sombra-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 2px 8px 0 rgba(0, 0, 0, 0.30); /* no escuro a sombra precisa ser mais densa: a diferenca de luminosidade entre a superficie e o fundo e menor */
    --rp-sombra-2: 0 6px 16px 0 rgba(0, 0, 0, 0.45), 0 16px 40px 0 rgba(0, 0, 0, 0.35);
    --rp-sombra-3: 0 10px 28px 0 rgba(0, 0, 0, 0.50), 0 28px 64px 0 rgba(0, 0, 0, 0.38);
    --rp-sombra-4: 0 30px 90px 0 rgba(0, 0, 0, 0.60);
  }
}

/* Escolha explícita do escuro, que vence nos dois sentidos. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --rp-grafico-3: #b07600; /* o ambar do claro fica claro demais sobre fundo escuro e estoura a faixa de luminosidade aceitavel */
  --rp-cor-texto-padrao: #f2f7f5;
  --rp-cor-texto-forte: #dbe7e3;
  --rp-cor-texto-suave: #a6b5b1;
  --rp-cor-texto-tenue: #8ea19b; /* legenda. Era #8a9c97 na proposta de 11/09, que dava 4,34:1 sobre a faixa mint escura -- abaixo do minimo de 4,5 que legenda exige. Clareado em vez de escurecer a faixa: clarear custa 1,1 ponto de L* na distancia com o texto.suave, e escurecer a faixa custaria 1,2 dos 5,3 pontos que a separam da superficie, que e pouco para uma faixa ja sutil */
  --rp-cor-texto-marca: #3dc88b; /* 6,89:1 sobre a pagina escura */
  --rp-cor-texto-erro: #f08a95;
  --rp-cor-texto-aviso: #e2b04a;
  --rp-cor-texto-sobre-marca: #091e19; /* no escuro o verde e claro, entao o texto em cima dele e o ink */
  --rp-cor-texto-sobre-acao: #091e19;
  --rp-cor-fundo-pagina: #091e19;
  --rp-cor-fundo-superficie: #102d27; /* o ink do tema claro */
  --rp-cor-fundo-discreto: #16352e;
  --rp-cor-fundo-mint: #0f3b28;
  --rp-cor-fundo-marca: #3dc88b;
  --rp-cor-fundo-erro: #3a2427;
  --rp-cor-fundo-aviso: #33301f;
  --rp-cor-fundo-sobreposicao: rgba(0, 6, 5, 0.66); /* atras do modal. Mais forte que no claro: aqui a distancia de luminancia entre o painel e a pagina e menor, entao um veu fraco nao separa os dois */
  --rp-cor-acao-primaria: #5ae5a4; /* no escuro o botao primario e claro, com texto ink */
  --rp-cor-acao-primaria-hover: #7cfcbc;
  --rp-cor-acao-confirmar: #5ae5a4;
  --rp-cor-acao-confirmar-hover: #7cfcbc;
  --rp-cor-borda-padrao: #26443c;
  --rp-cor-borda-suave: #1d3a32;
  --rp-cor-borda-campo: #80908c; /* o mesmo valor do claro: e o unico tom que fica a 3:1 dos DOIS fundos */
  --rp-cor-borda-marca: #3dc88b;
  --rp-cor-foco-anel: #3dc88b;
  --rp-cor-foco-halo: #091e19;
  --rp-sombra-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 2px 8px 0 rgba(0, 0, 0, 0.30); /* no escuro a sombra precisa ser mais densa: a diferenca de luminosidade entre a superficie e o fundo e menor */
  --rp-sombra-2: 0 6px 16px 0 rgba(0, 0, 0, 0.45), 0 16px 40px 0 rgba(0, 0, 0, 0.35);
  --rp-sombra-3: 0 10px 28px 0 rgba(0, 0, 0, 0.50), 0 28px 64px 0 rgba(0, 0, 0, 0.38);
  --rp-sombra-4: 0 30px 90px 0 rgba(0, 0, 0, 0.60);
}

/* Escopo por subárvore, para o que precisa FIXAR um tema independente da página.
   O caso que obrigou a existirem: a landing é sempre clara — fundo branco no
   próprio CSS — e, consumindo os tokens do :root, ficaria com texto claro sobre
   branco quando o visitante estivesse no tema escuro. Aplicar a classe no
   elemento host resolve inclusive dentro do Shadow DOM, porque custom property
   herda através dele (o que 'all: initial' não reseta).
   Servem também para trecho deliberadamente invertido: uma seção escura dentro
   de página clara, como a faixa de IA da landing. */
.rp-tema-claro {
  color-scheme: light;

  --rp-cor-texto-padrao: #102d27; /* 14,72:1 sobre branco */
  --rp-cor-texto-forte: #2c423d; /* rotulo de enfase, h4 */
  --rp-cor-texto-suave: #465a55; /* texto secundario e rotulo (7,0:1) */
  --rp-cor-texto-tenue: #60736e; /* legenda e nota de rodape. Era #6b807a na proposta de 11/09, que reprovava: 4,21:1 no card e 4,12:1 na pagina, contra o minimo de 4,5 que legenda exige por ser TEXTO. Escurecido preservando a cromaticidade (mesma proporcao entre canais lineares), o que mantem o matiz */
  --rp-cor-texto-marca: #227b54; /* link e texto verde */
  --rp-cor-texto-erro: #c62839;
  --rp-cor-texto-aviso: #a16207;
  --rp-cor-texto-sobre-marca: #ffffff; /* texto em cima do verde 700, 5,21:1 */
  --rp-cor-texto-sobre-acao: #fbfdfc; /* texto em cima do botao primario escuro */
  --rp-cor-fundo-pagina: #fbfdfc;
  --rp-cor-fundo-superficie: #ffffff; /* card, tabela, modal */
  --rp-cor-fundo-discreto: #f2f7f5; /* cabecalho de tabela, campo inativo, codigo */
  --rp-cor-fundo-mint: #e5feef; /* destaque calmo, faixa de recomendacao */
  --rp-cor-fundo-marca: #0eaa70; /* preenchimento, acento e grafico */
  --rp-cor-fundo-erro: #fdeef0;
  --rp-cor-fundo-aviso: #fdf6e3;
  --rp-cor-fundo-sobreposicao: rgba(2, 14, 11, 0.55); /* atras do modal. Preto tingido de verde-agua, e NAO um primitivo da escala: --rp-verde-950 (#072d1c) tem luminancia ~35 e a pagina escura ~25, entao usa-lo como escurecedor CLAREAVA a tela no tema escuro */
  --rp-cor-acao-primaria: #102d27; /* botao primario. 14,72:1 com texto branco */
  --rp-cor-acao-primaria-hover: #2c423d;
  --rp-cor-acao-confirmar: #227b54; /* confirmacao; aceita texto branco */
  --rp-cor-acao-confirmar-hover: #196141;
  --rp-cor-borda-padrao: #dce8e1; /* card e divisor */
  --rp-cor-borda-suave: #eaf1ee; /* divisor interno de tabela */
  --rp-cor-borda-campo: #80908c; /* borda de campo, que precisa de 3:1 contra o fundo */
  --rp-cor-borda-marca: #2a9163; /* borda significativa e campo em foco */
  --rp-cor-foco-anel: #227b54; /* o padrao do Bootstrap (rgba(primary,.25)) da 1,30:1 e o da landing 1,21:1; os dois reprovam o minimo de 3:1 */
  --rp-cor-foco-halo: #fbfdfc; /* segunda cor da tecnica do W3C: garante contraste quando o anel encosta num botao escuro */
  --rp-sombra-1: 0 1px 2px 0 rgba(16, 45, 39, 0.05), 0 2px 6px 0 rgba(16, 45, 39, 0.05); /* card em repouso. Tingida pelo ink, nao cinza neutro */
  --rp-sombra-2: 0 4px 12px 0 rgba(16, 45, 39, 0.07), 0 12px 32px 0 rgba(16, 45, 39, 0.07); /* card elevado, menu suspenso */
  --rp-sombra-3: 0 8px 24px 0 rgba(16, 45, 39, 0.10), 0 24px 56px 0 rgba(16, 45, 39, 0.08); /* painel lateral */
  --rp-sombra-4: 0 30px 90px 0 rgba(0, 26, 32, 0.20); /* modal sobre o fundo escurecido */
}

.rp-tema-escuro {
  color-scheme: dark;

  --rp-grafico-3: #b07600; /* o ambar do claro fica claro demais sobre fundo escuro e estoura a faixa de luminosidade aceitavel */
  --rp-cor-texto-padrao: #f2f7f5;
  --rp-cor-texto-forte: #dbe7e3;
  --rp-cor-texto-suave: #a6b5b1;
  --rp-cor-texto-tenue: #8ea19b; /* legenda. Era #8a9c97 na proposta de 11/09, que dava 4,34:1 sobre a faixa mint escura -- abaixo do minimo de 4,5 que legenda exige. Clareado em vez de escurecer a faixa: clarear custa 1,1 ponto de L* na distancia com o texto.suave, e escurecer a faixa custaria 1,2 dos 5,3 pontos que a separam da superficie, que e pouco para uma faixa ja sutil */
  --rp-cor-texto-marca: #3dc88b; /* 6,89:1 sobre a pagina escura */
  --rp-cor-texto-erro: #f08a95;
  --rp-cor-texto-aviso: #e2b04a;
  --rp-cor-texto-sobre-marca: #091e19; /* no escuro o verde e claro, entao o texto em cima dele e o ink */
  --rp-cor-texto-sobre-acao: #091e19;
  --rp-cor-fundo-pagina: #091e19;
  --rp-cor-fundo-superficie: #102d27; /* o ink do tema claro */
  --rp-cor-fundo-discreto: #16352e;
  --rp-cor-fundo-mint: #0f3b28;
  --rp-cor-fundo-marca: #3dc88b;
  --rp-cor-fundo-erro: #3a2427;
  --rp-cor-fundo-aviso: #33301f;
  --rp-cor-fundo-sobreposicao: rgba(0, 6, 5, 0.66); /* atras do modal. Mais forte que no claro: aqui a distancia de luminancia entre o painel e a pagina e menor, entao um veu fraco nao separa os dois */
  --rp-cor-acao-primaria: #5ae5a4; /* no escuro o botao primario e claro, com texto ink */
  --rp-cor-acao-primaria-hover: #7cfcbc;
  --rp-cor-acao-confirmar: #5ae5a4;
  --rp-cor-acao-confirmar-hover: #7cfcbc;
  --rp-cor-borda-padrao: #26443c;
  --rp-cor-borda-suave: #1d3a32;
  --rp-cor-borda-campo: #80908c; /* o mesmo valor do claro: e o unico tom que fica a 3:1 dos DOIS fundos */
  --rp-cor-borda-marca: #3dc88b;
  --rp-cor-foco-anel: #3dc88b;
  --rp-cor-foco-halo: #091e19;
  --rp-sombra-1: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 2px 8px 0 rgba(0, 0, 0, 0.30); /* no escuro a sombra precisa ser mais densa: a diferenca de luminosidade entre a superficie e o fundo e menor */
  --rp-sombra-2: 0 6px 16px 0 rgba(0, 0, 0, 0.45), 0 16px 40px 0 rgba(0, 0, 0, 0.35);
  --rp-sombra-3: 0 10px 28px 0 rgba(0, 0, 0, 0.50), 0 28px 64px 0 rgba(0, 0, 0, 0.38);
  --rp-sombra-4: 0 30px 90px 0 rgba(0, 0, 0, 0.60);
}