/* ============================================================
   Base — atmosfera, tipografia e o esqueleto de navegação.
   Componentes ficam em componentes.css; telas em telas.css.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100% }

body {
  font-family: var(--fonte-c);
  color: var(--texto);
  background: var(--base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* espaço para a barra de navegação + área segura do iPhone */
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  transition: background .7s ease;
}

/* Manchas radiais que respiram na cor da fase atual. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 80% 2%,   color-mix(in srgb, var(--fase, var(--aura-a)) 26%, transparent), transparent 68%),
    radial-gradient(54% 40% at 2% 30%,   color-mix(in srgb, var(--aura-a) 20%, transparent), transparent 68%),
    radial-gradient(66% 46% at 62% 66%,  color-mix(in srgb, var(--reciclagem) 15%, transparent), transparent 70%),
    radial-gradient(70% 48% at 30% 106%, color-mix(in srgb, var(--aura-b) 16%, transparent), transparent 70%);
  transition: background .8s ease;
}

/* ---------- tipografia ---------- */
h1 { font-family: var(--fonte-d); font-weight: 600; font-size: 33px; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance }
h2 { font-family: var(--fonte-d); font-weight: 600; font-size: 23px; letter-spacing: -.02em; text-wrap: balance }
h3 { font-family: var(--fonte-d); font-weight: 600; font-size: 16px; letter-spacing: -.01em; text-wrap: balance }
p  { color: var(--texto-2); font-size: 15px }

/* Nenhum link tinha cor. Os endereços das fontes da Escola saiam no azul
   padrao do navegador, rgb(0,0,238), sobre o fundo escuro do app: 1,99:1,
   ilegivel. Link herda a cor do texto e se distingue pelo sublinhado. */
a { color: inherit; text-decoration: underline; text-underline-offset: 2px }

/*
 * BOTÃO HERDA A COR DO TEXTO.
 *
 * Sem isto o navegador pinta todo <button> com a cor de sistema, que é
 * preta — e o app é escuro. Aconteceu três vezes: o cartão "Como usar o
 * app", os treze títulos do manual e a tela de bebidas. Em todas, o
 * elemento era um botão sem `color` declarado e o texto sumia no fundo.
 * Quem quiser outra cor continua declarando; o padrão deixa de ser uma
 * armadilha.
 */
button { color: inherit }
a:hover { text-decoration-thickness: 2px }

.olho {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 700;
}
.nota { font-size: 13px; color: var(--texto-3); line-height: 1.5 }

/* Contadores e qualquer número que muda: largura fixa por dígito,
   senão o tempo "pula" a cada segundo. */
.numero { font-variant-numeric: tabular-nums }

/* ---------- esqueleto ---------- */
.tela {
  max-width: 460px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cabecalho { display: flex; flex-direction: column; gap: 6px }

/* ---------- as duas barras fixas ----------
   As alturas ficam em variável porque outras folhas precisam descontá-las
   para preencher a tela: o tema claro da cozinha terminava no meio da tela
   e deixava uma costura escura embaixo por não saber esses números. */
:root {
  --altura-navegacao: 72px;
  --altura-barra-topo: 56px;
}

/* ---------- barra de navegação ---------- */
.navegacao {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 4px;
  background: color-mix(in srgb, var(--base) 82%, transparent);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--contorno);
}
/* `hidden` é atributo, e a regra de UA que o esconde tem especificidade
   menor que `.navegacao { display: flex }` daqui de cima. Sem esta linha a
   barra continua na tela durante o onboarding, mesmo com hidden ligado. */
.navegacao[hidden] { display: none }

.navegacao a {
  flex: 1;
  max-width: 96px;
  text-decoration: none;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 9px 4px;
  border-radius: var(--r-p);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: color .25s;
}
.navegacao a[aria-current="page"] { color: var(--acao-a) }
.navegacao a:focus-visible { outline: 2px solid var(--acao-a); outline-offset: 2px }
.navegacao .risco {
  width: 18px; height: 3px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: .25;
  transition: opacity .25s;
}
.navegacao a[aria-current="page"] .risco { opacity: 1 }

/* ---------- estados de carregamento ---------- */
.carregando {
  padding: 40px 0;
  text-align: center;
  color: var(--texto-3);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}