/* Identidade do Langris: os tokens de verdade, em um lugar só (rebranding de 10/10/2026).
 *
 * Primeira folha de TODA página servida. Troca valores, nunca nomes nem DOM: nenhuma classe,
 * nenhum texto e nenhum teste de frase muda por causa desta folha.
 *
 * Decisões registradas aqui (docs/design/rebranding-20261010.md):
 * 1. Uma cor de ação: o verde-lima #a9ff45, com texto escuro (--cor-sobre-acao). Botão principal é
 *    lima em toda página. O cobalto da identidade deixa de ser botão e vira informação (link,
 *    destaque de leitura); como texto ele aparece clareado (--cor-info), que passa AA no escuro.
 * 2. Foco de teclado sempre visível e sempre o mesmo: anel lima de 2 px afastado 2 px do controle.
 * 3. Uma fonte: Instrument Sans, um arquivo local (400 a 700). Peso acima de 700 não existe aqui.
 * 4. Só tema escuro (decisão do dono, 27/09/2026): nenhum bloco claro nesta folha.
 * 5. Uma exceção à regra de não ter classe aqui: o aviso (.lg-aviso, decisão 6 do design) e a faixa
 *    que ele reserva embaixo (decisão 5). ui.js o desenha em toda página que o carrega (o app, a
 *    entrada, o convite, a Central e o atendimento da equipe), e esta é a única folha que todas elas
 *    leem. É o único componente desta folha.
 *
 * Os valores são os que o produto já usa (os --lg-* de operacao-unificada.css, a escala mais
 * completa do repositório): trazê-los para cá não muda a tela, só a fonte da verdade.
 */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/acervo/fontsource/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Superfícies, do mais fundo ao mais alto */
  --cor-fundo: #050505;
  --cor-superficie: #0b0b0b;
  --cor-cartao: #121212;
  --cor-cartao-hover: #181818;
  --cor-campo: #111111;
  --cor-dialogo: #080808;
  --cor-elevada: #1c1c1c;
  --cor-veu: #000c;

  /* Linhas */
  --cor-linha-suave: #ffffff0e;
  --cor-linha: #ffffff17;
  --cor-linha-forte: #ffffff2d;

  /* Tintas. --cor-apagado só sobre o fundo: em cartão o texto pequeno usa --cor-apoio. */
  --cor-tinta: #f7f5f2;
  --cor-subtitulo: #cfccd3;
  --cor-apoio: #a3a0a8;
  --cor-apagado: #7d7a83;

  /* A marca e a ação: o verde-lima é o único */
  --cor-marca: #a9ff45;
  --cor-acao: var(--cor-marca);
  --cor-acao-hover: #b9ff66;
  --cor-acao-ativa: #93e83a;
  --cor-sobre-acao: #071004;            /* texto sobre o lima: 16,9:1 */
  --cor-acao-suave: #a9ff451f;          /* fundo de chip e do selo "Você aprova" */
  --cor-acao-linha: #a9ff4566;
  /* Botão principal desligado: neutro e opaco, nunca o lima apagado (lima com transparência ainda parece
     ação). Fundo elevado, linha fina e tinta apagada; o cursor diz que não responde. */
  --cor-desabilitado-fundo: var(--cor-elevada);
  --cor-desabilitado-linha: var(--cor-linha);
  --cor-desabilitado-tinta: var(--cor-apagado);

  /* Informação: o cobalto da identidade (link, destaque de leitura, o ponto azul do símbolo) */
  --cor-info: #9eb8ff;                  /* como texto sobre o escuro: 10,4:1 sobre o fundo */
  --cor-info-forte: #2357ff;            /* só como fundo ou traço, nunca como texto pequeno */
  --cor-info-suave: #2357ff24;

  /* Estados (lima é ação; estado é informação; destrutivo nunca é verde) */
  --cor-ok: #88d6ac;
  --cor-ok-suave: #88d6ac24;
  --cor-alerta: #ffbd62;
  --cor-alerta-suave: #ffbd6224;
  --cor-erro: #ff6b8a;
  --cor-erro-suave: #ff6b8a24;

  /* O espectro do Início e do Criar vídeo */
  --cor-amarelo: #f4e04d;
  --cor-rosa: #ef45ff;
  --cor-violeta: #8b5cff;
  --degrade-espectro: linear-gradient(90deg, #a9ff45, #f4e04d 38%, #ff4fa8 70%, #8b5cff);
  --degrade-progresso: linear-gradient(90deg, #a9ff45, #f4e04d 55%, #ef45ff);

  /* Foco de teclado: o mesmo anel em todo controle. Em contorno (outline), para não brigar com a
     sombra própria do componente; em sombra (--anel-foco) onde o componente zera o contorno.
     Variável que lê variável é resolvida onde é declarada: quem troca --foco-cor (o tema claro)
     declara de novo --foco-contorno e --anel-foco no mesmo bloco. */
  --foco-cor: var(--cor-marca);
  --foco-cor-claro: #3a6b00;            /* o lima escurecido, para o tema claro que ainda resta: 6,4:1 no branco */
  --foco-contorno: 2px solid var(--foco-cor);
  --foco-afastamento: 2px;
  --anel-foco: 0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--foco-cor);

  /* Raios. Um por tipo de componente: todo botão principal e secundário lê --raio-botao (trocar o
     valor aqui, por exemplo para a pílula 999px, troca todos juntos). */
  --raio-campo: 10px;
  --raio-botao: 12px;
  --raio-item: 14px;
  --raio-cartao: 20px;
  --raio-secao: 24px;
  --raio-dialogo: 24px;
  --raio-pilula: 999px;

  /* Sombras (cartões são chapados: só contorno) */
  --sombra-menu: 0 30px 90px #000e;
  --sombra-dialogo: 0 35px 120px #000;
  --sombra-aviso: 0 18px 60px #000b;
  --brilho-acao: 0 10px 30px #a9ff4526;

  /* Espaço */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --margem-tela: 16px;

  /* Tipografia */
  --fonte: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --texto-kicker: 11px;
  --texto-apoio: 13px;
  --texto-corpo: 16px;
  --texto-campo: 16px;
  --texto-subtitulo: 18px;
  --texto-titulo-secao: 24px;
  --texto-titulo-dialogo: clamp(22px, 2.6vw, 32px);
  --texto-titulo-tela: clamp(32px, 3.1vw, 44px);
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 700;
  --altura-titulo: 1.2;
  --altura-interface: 1.45;
  --altura-texto: 1.6;

  /* Controles */
  --alvo-toque: 44px;
  --altura-botao: 44px;
  --altura-botao-grande: 52px;
  --altura-campo: 44px;

  /* A faixa dos flutuantes e as camadas (decisões 5 e 6). O que flutua embaixo ("Falar com a equipe",
     "Produção") mora numa faixa da altura de um alvo de toque, com respiro em cima e embaixo. A página
     que tem flutuante liga --folga-flutuante (dieta.css): o conteúdo ganha essa folga no fim, e o foco
     e o aviso param acima dela. Sem flutuante a folga é zero. A barra de navegação do celular soma
     a altura dela aqui. O aviso, no <body>, é uma segunda faixa logo acima: --altura-aviso é a altura
     dele, medida por ui.js enquanto ele está na tela, e --folga-aviso vale essa altura só enquanto ele
     mora no <body> (num diálogo, ele ocupa o lugar dele lá dentro). --camada-aviso só vale onde não há
     a camada superior do navegador (popover).
     A barra de navegação do celular (decisão 8) é a faixa mais baixa de todas: no app, até 700 px, o
     menu principal desce para uma barra fixa embaixo, de --altura-barra-celular (ícone e nome num alvo
     de toque, com respiro) mais a área segura. --barra-celular vale essa altura só onde a barra existe
     (dieta.css); fora do app, no computador e nas telas de foco, é zero. */
  --faixa-flutuante: calc(var(--alvo-toque) + 2 * var(--esp-3));
  --altura-barra-celular: 60px;
  --barra-celular: 0px;
  --folga-flutuante: 0px;
  --altura-aviso: 0px;
  --folga-aviso: 0px;
  --camada-aviso: 11000;

  /* Movimento */
  --dur-rapida: 150ms;
  --dur-normal: 200ms;
  --dur-lenta: 240ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-normal: 0ms; --dur-lenta: 0ms; }
}

/* Apelidos em :root, medidos página a página contra as 49 folhas (10/10/2026).
 * Um apelido em :root só vale onde nenhuma folha redefine o nome; onde redefine (body.*,
 * .pulso, .ac-page…), quem manda é aquele bloco, e é ele que passa a ler daqui:
 * --id-* em identidade-cobalto.css, --ac-* em acesso-redesign.css, --lg-* em
 * operacao-unificada.css, --blue/--lp-* em inicio-cobalto.css. Os nomes que todas as páginas
 * redefinem (--bg, --ink, --accent, --exp-*, --factory-*, --video-*, --mv-*…) ficaram de fora:
 * aqui seriam letra morta.
 * Ficam só os que valem de fato:
 * - --lg-*: a família de tokens do produto. Vale em /montagem e /suporte-operador, que leem
 *   --lg-* (folhas da Montagem e do suporte) sem carregar operacao-unificada.css; nas demais
 *   páginas é a mesma coisa que a folha delas já define.
 * - --text-muted, --text, --surface, --muted: lidos com reserva literal por dieta.css e marca.css
 *   em páginas que não os definem (landing, cadastro, sua empresa, montagem); a reserva cinza
 *   vira o token do produto. */
:root {
  --lg-fundo: var(--cor-fundo); --lg-cartao: var(--cor-cartao); --lg-cartao-hover: var(--cor-cartao-hover);
  --lg-dialogo: var(--cor-dialogo); --lg-campo: var(--cor-campo); --lg-veu: var(--cor-veu);
  --lg-linha: var(--cor-linha); --lg-linha-suave: var(--cor-linha-suave); --lg-linha-forte: var(--cor-linha-forte);
  --lg-tinta: var(--cor-tinta); --lg-subtitulo: var(--cor-subtitulo); --lg-apoio: var(--cor-apoio); --lg-apagado: var(--cor-apagado);
  --lg-limao: var(--cor-marca); --lg-limao-hover: var(--cor-acao-hover); --lg-sobre-limao: var(--cor-sobre-acao);
  --lg-rosa: var(--cor-rosa); --lg-violeta: var(--cor-violeta); --lg-amarelo: var(--cor-amarelo);
  --lg-ambar: var(--cor-alerta); --lg-erro: var(--cor-erro);
  --lg-espectro: var(--degrade-espectro); --lg-progresso: var(--degrade-progresso);
  --lg-sombra-dialogo: var(--sombra-dialogo); --lg-sombra-menu: var(--sombra-menu); --lg-sombra-aviso: var(--sombra-aviso);
  --lg-brilho-limao: var(--brilho-acao);
  --lg-raio-pilula: var(--raio-pilula); --lg-raio-dialogo: var(--raio-dialogo); --lg-raio-secao: var(--raio-secao);
  --lg-raio-cartao: var(--raio-cartao); --lg-raio-item: var(--raio-item); --lg-raio-botao: var(--raio-botao); --lg-raio-campo: var(--raio-campo);
  --lg-fonte: var(--fonte); --lg-titulo-tela: var(--texto-titulo-tela); --lg-titulo-dialogo: var(--texto-titulo-dialogo);
  --lg-titulo-secao: var(--texto-titulo-secao); --lg-rotulo: var(--texto-subtitulo); --lg-kicker: var(--texto-kicker);
  --text-muted: var(--cor-apoio); --text: var(--cor-tinta); --surface: var(--cor-cartao); --muted: var(--cor-apoio);
}

/* Base mínima: vem antes de todas as folhas, então só vale onde ninguém mais escreve. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background-color: var(--cor-fundo); color: var(--cor-tinta); font-family: var(--fonte); }

/* O anel de foco de reserva, com especificidade zero (:where): todo controle que a folha dele
 * não pinta ganha o anel; quem tem regra de foco própria a mantém, e essas regras foram trocadas
 * para o mesmo anel nas folhas da identidade. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="link"]):focus-visible {
  outline: var(--foco-contorno);
  outline-offset: var(--foco-afastamento);
}

/* O aviso (decisões 5 e 6), desenhado por U.aviso em js/ui.js: um cartão (.lg-aviso__cartao, a frase e
 * o fechar) dentro do aviso (.lg-aviso). Fica embaixo, nunca no topo (lá moram a empresa, o selo e o
 * Sair). Um ponto colorido diz o tipo; a frase diz o resto.
 *
 * No <body>, o aviso é a sua própria faixa reservada: uma faixa opaca de largura cheia, logo acima da
 * faixa dos flutuantes (--folga-flutuante) e da área segura, com o cartão à direita no computador e
 * centrado no celular. Nada do conteúdo fica embaixo do cartão: o que estaria ali fica atrás da faixa,
 * e a página soma a faixa (--folga-aviso) à folga do conteúdo, à margem de rolagem e à posição do que
 * flutua embaixo, então o fim da página continua alcançável. A faixa é mostrada na camada superior do
 * navegador (popover manual); por isso as linhas de inset, margem, borda, fundo e overflow: elas
 * desfazem o que o navegador dá a todo [popover].
 *
 * Num diálogo que rola, o aviso mora no fim do que rola, preso ao pé da caixa (data-camada="dialogo"):
 * ocupa o próprio lugar, embaixo do rodapé, centrado e na largura da caixa. Num diálogo que não rola,
 * ele fica por cima, junto à borda de baixo (data-camada="sobre-o-dialogo"). */
:root:has(> body > .lg-aviso) { --folga-aviso: var(--altura-aviso); }
html { scroll-padding-bottom: calc(var(--folga-flutuante) + var(--folga-aviso)); }
body:has(> .lg-aviso) > #app { padding-bottom: var(--folga-aviso); }
.lg-aviso {
  position: fixed;
  z-index: var(--camada-aviso);
  inset: auto 0 var(--folga-flutuante) 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--esp-3) max(var(--esp-5), env(safe-area-inset-right, 0px)) calc(var(--esp-3) + max(0px, env(safe-area-inset-bottom, 0px) - var(--folga-flutuante))) max(var(--esp-5), env(safe-area-inset-left, 0px));
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--cor-linha-suave);
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte);
  font-size: var(--texto-corpo);
  font-weight: var(--peso-medio);
  line-height: var(--altura-interface);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  pointer-events: auto;
}
.lg-aviso .lg-aviso__cartao {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  width: max-content;
  max-width: min(440px, 100%);
  min-height: var(--alvo-toque);
  margin: 0;
  padding: 0 0 0 var(--esp-4);
  border: 1px solid var(--cor-linha-forte);
  border-radius: var(--raio-item);
  background: var(--cor-elevada);
  box-shadow: var(--sombra-aviso);
  animation: lg-aviso-entra var(--dur-normal) var(--curva) both;
}
.lg-aviso .lg-aviso__cartao::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 18px var(--esp-3) 0 0;
  border-radius: var(--raio-pilula);
  background: var(--cor-ok);
}
.lg-aviso--info .lg-aviso__cartao::before { background: var(--cor-info); }
.lg-aviso--erro .lg-aviso__cartao { border-color: color-mix(in srgb, var(--cor-erro) 55%, transparent); }
.lg-aviso--erro .lg-aviso__cartao::before { background: var(--cor-erro); }
.lg-aviso .lg-aviso__texto {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--esp-3) 0;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}
.lg-aviso .lg-aviso__fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--raio-item);
  background: transparent;
  box-shadow: none;
  color: var(--cor-apoio);
  cursor: pointer;
}
.lg-aviso .lg-aviso__fechar:hover { background: var(--cor-linha-suave); color: var(--cor-tinta); }
/* O anel fica DENTRO do botão (recuado 4 px), à vista sem passar da borda do cartão. A classe repetida
   dá à regra o peso para valer sobre as regras de foco gerais das telas, que afastam o anel para fora. */
.lg-aviso .lg-aviso__cartao .lg-aviso__fechar.lg-aviso__fechar:focus-visible { outline: var(--foco-contorno); outline-offset: -4px; }
.lg-aviso .lg-aviso__fechar svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* No diálogo que rola: no fluxo, no fim da caixa, preso ao pé dela, numa faixa opaca da cor da caixa (o
   que rola por baixo some atrás dela, como na página, em vez de ficar sob o cartão). */
.lg-aviso[data-camada="dialogo"] {
  position: sticky;
  z-index: 6;
  inset: auto auto 0 auto;
  justify-content: center;
  margin: var(--esp-4) 0 0;
  padding: var(--esp-3) 0;
  border: 0;
  border-top: 1px solid var(--cor-linha-suave);
  background: inherit;
}
.lg-aviso[data-camada="dialogo"] .lg-aviso__cartao { max-width: 100%; }
/* O foco e a rolagem da caixa param acima da faixa do aviso preso ao pé dela. E, enquanto ele mora ali, a
   faixa dele é o pé da caixa: a caixa não guarda espaço embaixo dela (por ali o que rola apareceria por
   baixo da faixa presa). A classe repetida dá à regra o peso para valer sobre o espaçamento de cada caixa. */
:is(.modal__caixa, dialog):has(> .lg-aviso[data-camada="dialogo"]) { scroll-padding-bottom: var(--altura-aviso); }
.modal__caixa.modal__caixa.modal__caixa:has(> .lg-aviso[data-camada="dialogo"]) { padding-bottom: 0; }
dialog[open]:modal:has(> .lg-aviso[data-camada="dialogo"]) { padding-bottom: 0; }
/* No diálogo que não rola: por cima dele, junto à borda de baixo, centrado; sem faixa. */
.lg-aviso[data-camada="sobre-o-dialogo"] {
  inset: auto 0 calc(env(safe-area-inset-bottom, 0px) + var(--esp-4)) 0;
  justify-content: center;
  padding: 0 max(var(--margem-tela), env(safe-area-inset-right, 0px)) 0 max(var(--margem-tela), env(safe-area-inset-left, 0px));
  border: 0;
  background: transparent;
  pointer-events: none;
}
.lg-aviso[data-camada="sobre-o-dialogo"] .lg-aviso__cartao { pointer-events: auto; }
@media (max-width: 700px) {
  .lg-aviso {
    justify-content: center;
    padding-right: max(var(--margem-tela), env(safe-area-inset-right, 0px));
    padding-left: max(var(--margem-tela), env(safe-area-inset-left, 0px));
  }
}
@keyframes lg-aviso-entra { from { opacity: 0; transform: translateY(8px); } }