/* Ponte entre o vocabulário de tokens da landing e o do painel.
 *
 * POR QUE ESTE ARQUIVO EXISTE: o base.css deste painel foi escrito antes do
 * PADRAO-LANDING.md e usa nomes próprios — --azul, --tinta, --papel, --fundo.
 * O landing.css copiado do Google Cloud fala a língua dos outros painéis:
 * --brand, --ink, --surface, --ground. São os mesmos conceitos com nomes
 * diferentes, e havia três saídas.
 *
 * Renomear os tokens do painel resolveria de vez, mas mexe em ~900 usos
 * espalhados por app.css e app.js de um produto que já está pronto e revisado
 * — risco grande por ganho de arrumação. Reescrever o landing.css contra os
 * nomes daqui contraria a norma ("copiado, nunca escrito do zero") e jogaria
 * fora os ajustes de sombra, raio e espaçamento que já estavam bons.
 *
 * Esta é a terceira: uma camada fina que declara os nomes compartilhados
 * APONTANDO para os tokens que o painel já tem. Nenhum valor é duplicado onde
 * já existe um — `--brand: var(--azul)` não pode divergir de --azul, enquanto
 * `--brand: #0078D4` podia. Os valores literais aqui embaixo são só os que o
 * painel ainda não tinha nome para.
 *
 * ⚠️ Carregue DEPOIS do base.css e ANTES do landing.css.
 */

:root {
  /* ---- marca ---- */
  --brand: var(--azul);
  --brand-vivo: #2E9BFF;
  /* themeLighter da Fluent para o #0078D4. O painel não tinha um fundo claro
     de marca porque nunca precisou de um; a landing precisa. */
  --brand-fundo: #DEECF9;

  /* O estudio de motion compara --azul-fundo com o tema; o painel tem --azul
     mas nunca precisou de um fundo claro dele. Mesmo valor de --brand-fundo,
     por apontamento, para os dois nao poderem divergir. */
  --azul-fundo: var(--brand-fundo);

  /* --navy já existe no base.css. --navy-fundo é o tom em que o rodapé e o
     topo da landing assentam, um degrau abaixo dele. */
  --navy-fundo: #061320;

  /* ---- cores de estado ---- */
  --ouro: var(--ambar);
  --ouro-fundo: var(--alerta-fraco);
  --verde: var(--ok);
  --verde-fundo: var(--ok-fraco);
  --vermelho: var(--erro);
  --vermelho-fundo: var(--erro-fraco);
  --violeta: var(--c-ia);
  --violeta-fundo: #F0EAF9;

  /* ---- superfícies ---- */
  --ground: var(--fundo);
  --surface: var(--papel);
  --surface-2: #F1F4F9;
  --surface-3: var(--borda);
  --linha: rgba(16, 35, 59, .08);

  /* ---- tinta ---- */
  --ink: var(--tinta);
  --ink-2: var(--tinta-2);
  --ink-3: var(--tinta-3);
  --nav-ink: #FFFFFF;
  --nav-ink-dim: #8FAACB;

  /* ---- sombras ----
     O painel tem três degraus (--sombra-1..3) e a landing usa quatro: ela
     precisa de um nível mais alto para o cartão de preço e os modais, que
     flutuam sobre a página inteira. Os três primeiros apontam para os que já
     existem; só o quarto é novo. */
  --s-1: var(--sombra-1);
  --s-2: var(--sombra-2);
  --s-3: var(--sombra-3);
  --s-4: 0 8px 20px rgba(16, 35, 59, .10), 0 28px 70px rgba(16, 35, 59, .16);
  --s-marca: 0 6px 18px rgba(0, 120, 212, .28);

  /* ---- raios ----
     A escala da landing é mais generosa que a do painel: cartão de venda com
     canto de 10px parece formulário. Nomes novos, para não mexer nos do
     painel, que estão calibrados para densidade de informação. */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 20px;
  --r-4: 28px;
  --r-pill: 999px;

  /* ---- tipografia ----
     Segoe UI é a fonte da Microsoft, mas não está no Google Fonts e só existe
     no Windows: num Mac ou num Android a página cairia num fallback que a
     gente não desenhou. Inter é a substituta mais próxima em métrica, numa
     família só para display e texto. */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* O painel não tem modo escuro, mas o landing.css copiado TEM as regras dele.
 * Sem este bloco, um navegador em modo escuro aplicaria regra de escuro com
 * valor de claro — texto claro sobre fundo claro, ilegível, e só na máquina de
 * quem usa o tema escuro.
 *
 * O escopo é só a ponte: o painel continua claro em qualquer tema. Dar modo
 * escuro ao produto inteiro é outro trabalho, e não é este.
 *
 * O azul #0078D4 perde contorno sobre preto — no escuro ele clareia. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #4CA6E8;
    --brand-vivo: #7CC0F0;
    --brand-fundo: #0E2742;

    --navy: #071A33;
    --navy-fundo: #040E1E;

    --ouro: #FFC83D;
    --ouro-fundo: #2E2211;
    --verde: #4FC24F;
    --verde-fundo: #0E2A19;
    --vermelho: #FF6B5E;
    --vermelho-fundo: #2E1512;
    --violeta: #B99BDC;
    --violeta-fundo: #221839;

    --ground: #070C15;
    --surface: #101826;
    --surface-2: #172232;
    --surface-3: #1F2D40;
    --linha: rgba(255, 255, 255, .07);

    --ink: #EAF1F9;
    --ink-2: #A9BDD4;
    --ink-3: #74879F;

    --s-1: 0 1px 2px rgba(0, 0, 0, .5);
    --s-2: 0 2px 8px rgba(0, 0, 0, .45), 0 8px 20px rgba(0, 0, 0, .35);
    --s-3: 0 6px 16px rgba(0, 0, 0, .5), 0 20px 48px rgba(0, 0, 0, .45);
    --s-4: 0 10px 26px rgba(0, 0, 0, .55), 0 32px 80px rgba(0, 0, 0, .5);
  }
}