/* ===========================================================================
   Mindy — o sistema visual, uma vez só.

   Cor e tipografia NAO moram mais aqui. Elas sao geradas a partir de
   `lib/core/theme/mindy_theme.dart` por `tool/gerar_design_system.py` e
   chegam pelo `colors_and_type.css` importado abaixo — o mesmo pacote que
   esta publicado no claude.ai/design.

   Este arquivo passou a ter duas funcoes, e so duas:
     1. traduzir os nomes do pacote (`--cor-paper`) para os nomes que as
        paginas ja usam (`--papel`), sem precisar reescrever 139 usos;
     2. guardar o que e do site e nao do aplicativo — largura de coluna,
        respiro entre secoes, cabecalho, botao, rodape.

   Por que a traducao existe: escrever a paleta a mao aqui foi exatamente o
   que deixou o modo escuro derivar em 8 dos 11 tokens (a marca ficou
   #7FC9A8 no site enquanto o aplicativo ja usava #8FDCB4). Agora ha um valor
   so, num lugar so. Mexeu no tema? Rode o gerador e sincronize.
   =========================================================================== */

@import url('colors_and_type.css');

/* --- traducao ------------------------------------------------------------
   Cada apelido aponta para o token gerado. Nao repetimos os blocos de tema
   escuro: `--cor-*` ja troca sozinho no `prefers-color-scheme` e no
   `[data-theme]`, e como a substituicao de variavel acontece na hora do uso,
   o apelido acompanha a troca sem uma linha a mais. */
:root {
  --papel: var(--cor-paper);
  --erguido: var(--cor-raised);
  --afundado: var(--cor-sunken);
  --fio: var(--cor-hairline);
  --tinta: var(--cor-ink);
  --suave: var(--cor-muted);
  --marca: var(--cor-brand);
  --sobre-marca: var(--cor-on-brand);
  --acento: var(--cor-accent);
  --acento-suave: var(--cor-accent-soft);
  --sobre-acento-suave: var(--cor-on-accent-soft);

  --display: var(--fonte-display);
  --corpo: var(--fonte-corpo);

  /* A sombra e uma receita do site montada sobre a cor gerada: a opacidade
     que muda entre claro e escuro ja vem de `--cor-shadow`. */
  --sombra: 0 18px 48px var(--cor-shadow);
  --sombra-curta: 0 2px 10px var(--cor-shadow);

  /* Estes dois sao do site e nao existem no aplicativo: uma pagina de entrada
     em tela larga nao tem a mesma medida de uma tela de celular. */
  --coluna: 1120px;
  --respiro: clamp(64px, 8vw, 104px);
}

/* `box-sizing`, `margin: 0` e a base do body vem do pacote importado. Aqui
   ficam so os ajustes que a pagina de entrada acrescenta. */
body {
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* --- tipografia da pagina ------------------------------------------------
   A escala do pacote (`.t-display-large`, 44px fixo) e a do aplicativo, feita
   para caber num celular. Uma capa de site respira em outra medida, entao os
   titulos daqui sao fluidos. A familia e os eixos sao os mesmos. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 120;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(40px, 7.2vw, 76px); }
h2 { font-size: clamp(31px, 4.6vw, 48px); }
h3 {
  font-size: 21px;
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
p { margin: 0; }
a { color: inherit; }

.rotulo {
  font-family: var(--corpo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave);
}

.limite {
  width: min(100% - 40px, var(--coluna));
  margin-inline: auto;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- a marca ------------------------------------------------------------ */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 26px; height: 26px; display: block; }
.marca span {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 400;
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.01em;
}

/* --- cabecalho ---------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.topo.rolado { border-bottom-color: var(--fio); }
.topo .limite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}
.topo nav { display: flex; align-items: center; gap: 26px; }
.topo nav a {
  font-size: 15px;
  color: var(--suave);
  text-decoration: none;
  transition: color 160ms ease;
}
.topo nav a:hover { color: var(--tinta); }
@media (max-width: 760px) { .topo nav a.some { display: none; } }

.tema {
  border: 1px solid var(--fio);
  background: transparent;
  color: var(--suave);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.tema:hover { color: var(--tinta); border-color: var(--suave); }
.tema svg { width: 17px; height: 17px; }

/* --- botoes ------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--marca);
  color: var(--sobre-marca);
  font-family: var(--corpo);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.botao:hover { transform: translateY(-1px); box-shadow: var(--sombra-curta); }
.botao:active { transform: translateY(0); }
.botao[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* --- rodape ------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--fio); padding-block: 34px; }
.rodape .limite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 14px;
  color: var(--suave);
}
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--tinta); }