/* Camada semântica: dá NOME DE USO às cores da marca.
 *
 * As cores em si vivem em tokens.brand.css, gerado de tools/palette.py. Aqui
 * só se decide onde cada uma entra. A separação existe para que trocar um tom
 * da marca seja uma linha no Python, e mudar o papel de um tom seja uma linha
 * aqui — sem os dois se confundirem.
 *
 * Regra que este arquivo carrega do briefing: o CORAL é acento restrito. Ele
 * acende no CTA e em mais nada. Se aparecer como fundo de área grande ou como
 * cor de texto corrido, a peça perde o único ponto quente que tem.
 */

@import url("tokens.brand.css");

:root {
  /* --- superfícies -------------------------------------------------------
     Três fundos, alternando: escuro para os momentos de argumento, branco
     para o que precisa de leitura longa, areia para o respiro. Areia e não
     um segundo cinza: é o que tira a página do branco clínico de SaaS. */
  --ground-escuro: var(--indigo-950);
  --ground-claro: var(--neutro-0);
  --ground-areia: var(--areia-50);
  --ground-pagina: var(--neutro-50);
  --superficie: var(--neutro-0);
  --superficie-chip: var(--indigo-50);

  /* --- texto ------------------------------------------------------------- */
  --texto-forte: var(--indigo-950);
  --texto: var(--neutro-800);
  --texto-apoio: var(--neutro-600);
  --texto-fraco: var(--neutro-400);
  --sobre-escuro: var(--neutro-0);
  --sobre-escuro-apoio: var(--indigo-300);

  /* --- marca e ação ------------------------------------------------------ */
  --acao: var(--indigo-600);
  --acao-hover: var(--indigo-700);
  --acao-texto: var(--neutro-0);
  --link-claro: var(--indigo-600);   /* 6.29:1 sobre branco */
  --link-escuro: var(--indigo-300);  /* 6.64:1 sobre indigo-950 */

  /* CTA. Coral sobre navy dá 6.23:1 com texto escuro em cima — é o par
     medido em palette.py, não uma escolha de olho. */
  --cta: var(--coral-500);
  --cta-texto: var(--indigo-950);
  --cta-em-claro: var(--coral-800); /* o único coral que passa como TEXTO */

  /* --- linhas ------------------------------------------------------------ */
  --linha: var(--neutro-200);
  --linha-suave: var(--neutro-100);
  --linha-escura: rgba(164, 158, 240, 0.22);

  /* --- forma -------------------------------------------------------------
     O raio grande vem do símbolo: o balão da marca tem canto de 84/512 do
     lado. Os cartões repetem essa proporção em vez de um raio genérico. */
  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 26px;
  --raio-xl: 34px;
  --raio-full: 999px;

  /* --- espaço ------------------------------------------------------------ */
  --e-xxs: 4px;  --e-xs: 8px;   --e-sm: 12px;  --e-md: 16px;
  --e-lg: 24px;  --e-xl: 32px;  --e-xxl: 48px; --e-3xl: 72px;
  --secao: 96px;
  --secao-lg: 128px;

  /* --- elevação ----------------------------------------------------------
     Sombra em navy, não em preto: sombra preta sobre fundo indigo suja. */
  --sombra-1: 0 1px 2px rgba(30, 27, 75, 0.06);
  --sombra-2: 0 2px 6px rgba(30, 27, 75, 0.06), 0 12px 28px -18px rgba(30, 27, 75, 0.22);
  --sombra-3: 0 24px 60px -32px rgba(30, 27, 75, 0.34);
  --sombra-cta: 0 12px 28px -14px rgba(255, 122, 89, 0.55);

  /* --- movimento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-rapida: 180ms;
  --dur: 340ms;
  --dur-lenta: 620ms;

  /* --- medida ------------------------------------------------------------ */
  --container: 1180px;
  --container-estreito: 880px;
  --goteira: 24px;
}

@media (min-width: 768px) {
  :root { --goteira: 40px; }
}