/* Surface styles. Tokens only — every colour comes from brand/brand.css.
   BRAND.md is normative; validate-brand-tokens.mjs enforces it.

   The template's own palette was removed by BRAND-101 rather than mapped onto
   tokens: the two palettes have no shared meaning, and a mapping would have
   invented equivalences nobody chose. Public surface: Zero brand only, never a company's. */

*, *::before, *::after { box-sizing: border-box; }

/* A superfície pública é CLARA, e ela diz isso em voz alta.
 *
 * O tema escuro do Zero é opt-in por `[data-theme='dark']`, que só o painel
 * escreve — nenhuma página de `site/` o liga. Sem `color-scheme` declarado, o
 * que o navegador desenha por conta própria fica no escuro quando o SISTEMA
 * está no escuro, sobre um fundo que é claro: barra de rolagem, `<input>` e
 * `<select>` do assistente, e o cursor de texto dentro do campo de CNPJ. Uma
 * linha resolve, e ela diz a verdade sobre esta superfície.
 *
 * **O que esta linha NÃO resolve, e foi medido:** o modo escuro do Samsung
 * Internet. Ele escurece a página inteira por conta própria e ignora
 * `color-scheme` — conferido no Galaxy A56, com e sem a declaração, mesmo
 * resultado. O Chrome do mesmo aparelho desenha a página clara e correta.
 * Consequência, que continua de pé: sob esse escurecedor os títulos com degradê
 * de marca (`background-clip: text` em `landing.css`, `legal.css` e
 * `wizard.css`) perdem legibilidade, porque para o algoritmo o degradê é fundo
 * — e aqui o fundo é a TINTA da letra. Resolver isso de verdade é dar um tema
 * escuro à superfície pública, não remendar um seletor. Ver SITE-104. */
:root { color-scheme: light; }

body {
  margin: 0;
  background: var(--z-surface-1);
  color: var(--z-ink-900);
  font-family: var(--z-font-sans);
  font-size: var(--z-text-body);   /* 16px minimum — field use, gloves, sun */
  line-height: var(--z-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--z-font-display);
  letter-spacing: var(--z-tracking-display);
  line-height: var(--z-leading-tight);
  margin: 0 0 var(--z-space-3);
}

h1 { font-size: var(--z-text-h1); }
h2 { font-size: var(--z-text-h2); }
h3 { font-size: var(--z-text-h3); }

a { color: var(--z-info); }

/* Every interactive element: 48px minimum, and a focus ring that is both
   accessibility and brand. */
button, .z-btn, input, select, textarea {
  font-family: var(--z-font-sans);
  font-size: var(--z-text-body);
  min-height: var(--z-tap-min);
}

button, .z-btn {
  border: 0;
  border-radius: var(--z-r-pill);
  padding: 0 var(--z-space-5);
  /* Chrome, so it takes the COMPANY's colour — never a category colour.
     See BRAND.md 3.5. */
  background: var(--z-brand-1);
  color: var(--z-brand-1-ink);
  cursor: pointer;
  transition: filter var(--z-dur-fast) var(--z-ease);
}

button:hover, .z-btn:hover { filter: brightness(1.08); }
button:disabled, .z-btn:disabled { opacity: .55; cursor: not-allowed; }

button:focus-visible, .z-btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--z-surface-0), 0 0 0 4px var(--z-focus);
}

input, select, textarea {
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-sm);
  color: var(--z-ink-900);
  padding: 0 var(--z-space-3);
  width: 100%;
}

.z-eyebrow {
  font-size: var(--z-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--z-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-ink-300);
}

.z-muted { color: var(--z-ink-400); }
.z-surface { background: var(--z-surface-0); border-radius: var(--z-r-md); box-shadow: var(--z-elev-1); }

/* --------------------------------------------------------- public surface */

/* Everything the authenticated shell needed moved to painel/ with WEB-101.
   What stays is what a visitor with no account sees. */

/* `100dvh` depois de `100vh`, e não no lugar dele.
 *
 * No celular `100vh` é a janela GRANDE — a altura com a barra de endereço já
 * recolhida. Numa página curta (`/app`, a tela neutra de `/entrar-na-empresa`)
 * isso reserva a altura da barra do navegador a mais do que existe, e a página
 * ganha uma rolagem de ~110px que não leva a lugar nenhum: o rodapé some abaixo
 * da dobra sem ter conteúdo para justificar. `100dvh` é a janela de verdade,
 * agora. A linha `100vh` fica como reserva para quem não conhece a unidade. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-4);
  padding: var(--z-space-4) var(--z-space-6);
  border-bottom: 1px solid var(--z-border);
  /* Rede de segurança, e só isso: com o texto do sistema ampliado, ou numa tela
     mais estreita do que qualquer celular que exista hoje, a navegação desce
     para a segunda linha em vez de empurrar a página de lado. Medido a 360px
     com raiz de 20px: `scrollWidth` era 393 contra `clientWidth` 360, e a
     página inteira andava na horizontal. */
  flex-wrap: wrap;
}

/* O símbolo sozinho tem 40px de altura e é um link — abaixo dos 48px que
   `--z-tap-min` fixa. Não muda a altura do cabeçalho: os botões ao lado já
   têm 48px e são eles que a definem. */
.brand { display: inline-flex; align-items: center; gap: var(--z-space-3); text-decoration: none; min-height: var(--z-tap-min); }
.brand img { display: block; }

.brand-name {
  font-family: var(--z-font-display);
  font-weight: 700;
  font-size: var(--z-text-h3);
  color: var(--z-ink-900);
}

.site-nav { display: flex; gap: var(--z-space-3); }

.eyebrow {
  margin: 0 0 var(--z-space-2);
  font-size: var(--z-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--z-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-ink-300);
}

.hero {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--z-space-8) var(--z-space-6);
  text-align: center;
}

.hero h1 {
  margin: 0 0 var(--z-space-4);
  font-size: var(--z-text-display);
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-display);
}

.hero-lead {
  margin: 0 auto var(--z-space-6);
  max-width: 38rem;
  font-size: var(--z-text-h3);
  line-height: var(--z-leading-body);
  color: var(--z-ink-500);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-3);
  justify-content: center;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--z-space-2);
  min-height: var(--z-tap-min);
  padding: 0 var(--z-space-5);
  border-radius: var(--z-r-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  /* **Rótulo de botão não quebra.** Era daqui que vinha a queixa: num celular o
     cabeçalho não tinha largura para "Zero" + "Entrar" + "Cadastrar empresa", o
     flex encolheu o botão sólido abaixo do texto dele, e "Cadastrar empresa"
     saiu em duas linhas numa pílula de 51px de altura — 137,8×51,2 a 360px,
     medido. Uma pílula de duas linhas não parece um botão: parece um botão
     quebrado, e foi exatamente essa a palavra usada.

     Com `nowrap` o botão passa a ter uma largura mínima honesta. Quem cede
     espaço é o cabeçalho, na regra de tela estreita logo abaixo. */
  white-space: nowrap;
}

.primary-button { background: var(--z-brand-1); color: var(--z-brand-1-ink); border: 0; }
.primary-button:hover { filter: brightness(1.08); }

.ghost-button {
  background: transparent;
  color: var(--z-ink-700);
  box-shadow: inset 0 0 0 1px var(--z-border-strong);
}

.ghost-button:hover { background: var(--z-surface-2); }

.feature-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--z-space-4);
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--z-space-6) var(--z-space-8);
}

.feature {
  padding: var(--z-space-5);
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-md);
}

.feature h2 { margin: var(--z-space-3) 0 var(--z-space-2); font-size: var(--z-text-h3); }
.feature p { margin: 0; color: var(--z-ink-500); }

.feature .material-symbols-outlined {
  font-size: 32px;
  color: var(--z-focus);
}

.site-footer {
  padding: var(--z-space-5) var(--z-space-6);
  border-top: 1px solid var(--z-border);
  text-align: center;
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

.site-footer p { margin: 0 0 var(--z-space-2); }
.site-footer a { color: var(--z-info); }
.site-version { font-family: var(--z-font-mono); font-size: var(--z-text-xs); }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 20px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media (max-width: 40rem) {
  .site-header, .hero, .feature-grid, .site-footer {
    padding-left: var(--z-space-4);
    padding-right: var(--z-space-4);
  }

  .hero h1 { font-size: var(--z-text-h1); }
}

/* ------------------------------------------- o cabeçalho na tela estreita
 *
 * A conta, medida a 360px com o texto em 16px: sobram 328px entre as bordas do
 * cabeçalho, e dentro deles cabem símbolo (40) + "Zero" (57) + "Entrar" (94) +
 * "Cadastrar empresa" sem quebra (190) + dois espaços (24) = 405. São 77px a
 * mais do que existe, e é por isso que o botão quebrava.
 *
 * O que sai é a PALAVRA "Zero", não a marca: o símbolo continua ali, continua
 * levando para a home e continua sendo a marca — `BRAND.md` trata o anel como
 * assinatura por si só, e é ele que aparece no ícone do app e na aba do
 * navegador, onde nunca houve palavra nenhuma ao lado.
 *
 * O que NÃO sai é nenhum dos dois botões. Eles são, nas palavras de
 * `landing.css`, "a razão desta página existir": esconder o cadastro num
 * celular seria esconder a ação que o dono foi conferir.
 *
 * Fica: 40 + 94−16 + 174 + 24 = 316 em 328. Doze pixels de folga, medidos.
 */
@media (max-width: 30rem) {
  .brand-name { display: none; }

  /* Sem a palavra ao lado, o link da marca fica do tamanho do símbolo: 40px, e
     é o único alvo de toque da tela abaixo de `--z-tap-min`. Os 8px que faltam
     entram como largura mínima e viram área clicável vazia à direita do anel —
     o anel continua alinhado com a margem da página, então nada se move.
     Os 4px de gap devolvidos logo abaixo pagam por eles. */
  .brand { min-width: var(--z-tap-min); }

  .site-header { gap: var(--z-space-3); }

  /* O respiro lateral dos botões cede 8px de cada lado. É o último ajuste antes
     de mexer no tamanho da letra, e o tamanho da letra não se mexe: 16px é o
     piso do produto — campo, luva, sol. */
  .site-nav .primary-button,
  .site-nav .ghost-button { padding-inline: var(--z-space-4); }
}

/* Shown only when the backend reports maintenance, so a visitor gets a sentence
   instead of a wizard that fails on its first step. */
.maintenance-notice {
  max-width: 34rem;
  margin: 0 auto var(--z-space-5);
  padding: var(--z-space-3) var(--z-space-4);
  border-radius: var(--z-r-sm);
  background: var(--z-surface-2);
  color: var(--z-ink-500);
}

.maintenance-notice[hidden] { display: none; }


/* ------------------------------------------------ a landing, enxuta

   A marca no herói, no tamanho em que se reconhece. A mesma imagem do
   cabeçalho, e não uma variante: duas versões do logotipo é uma para esquecer de
   atualizar. */
.hero-mark {
  display: block;
  margin: 0 auto var(--z-space-4);
}

/* A frase que tira o pé do freio, logo abaixo dos botões e não antes deles:
   quem já decidiu não precisa lê-la, e quem hesitou encontra a resposta onde
   hesitou. */
.hero-note {
  margin: var(--z-space-4) 0 0;
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

/* Os dois botões do cabeçalho lado a lado, com respiro entre eles. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--z-space-2);
}