/* ELAPODE — tokens de design (spec §9).

   Duas paletas, e a separação é de segurança, não de estética:

   - `--berry-*` é a identidade da plataforma, e vive **dentro** da área
     autenticada. É lá que a mulher está protegida por PIN.
   - `--fachada-*` é definido por cada tela de proteção. Um bloco de receitas
     em berry seria um bloco de receitas estranho, e a estranheza é justamente
     o que o disfarce não pode causar.

   Contraste: todos os pares de texto/fundo daqui foram medidos para WCAG 2.1
   AA (4,5:1 em texto normal, 3:1 em texto grande e em componentes). Ao
   acrescentar cor, meça antes — uma paleta passa na média e reprova no ponto
   mais claro, que é onde ninguém olha. */

:root {
  /* --- berry: a plataforma --- */
  --berry-900:#3D0B25;   /* texto sobre fundo claro: 13,4:1 */
  --berry-800:#5A1238;   /* primária da spec */
  --berry-600:#8A1F55;
  --berry-500:#B0306E;   /* secundária da spec */
  --berry-100:#F6E7EF;
  --berry-050:#FCF7FA;

  --acento:#F6B26B;      /* acento da spec — só em fundo escuro */
  --acento-ink:#8A4B00;  /* a versão segura para texto sobre claro: 5,2:1 */

  /* --- neutros --- */
  --bg:#FBF9FA;
  --surface:#FFFFFF;
  --surface-alt:#F5F1F3;
  --ink:#1F1A1D;         /* 15,8:1 sobre --surface */
  --muted:#5E5359;       /* 7,1:1 sobre --surface */
  --line:#E7DFE3;

  /* --- estado --- */
  /* Sem vermelho de alarme para "não seguiu desta vez": é uma notícia
     difícil, não um erro de quem recebeu. */
  --ok:#1E7A55;
  --atencao:#8A5A00;
  --erro:#A32219;

  /* --- tipografia --- */
  /* Auto-hospedadas. Nenhum request a terceiro: um CDN receberia o IP de quem
     visita, e esse registro fica em servidor que não controlamos. */
  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:var(--font-body);

  /* --- espaço e forma --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
  --radius:var(--radius-md);
  --sombra-1:0 1px 2px rgba(31,26,29,.06);
  --sombra-2:0 6px 20px rgba(90,18,56,.10);
  --container:1040px;

  /* Alvo mínimo de toque (WCAG 2.5.5 / 2.5.8). Mobile-first não é só largura:
     é conseguir acertar o botão com o polegar, com pressa. */
  --alvo:44px;
}

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

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

body {
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
}

/* Foco sempre visível, e com contraste próprio. Remover o anel de foco é o
   erro de acessibilidade mais comum e o mais grave para quem navega por
   teclado. */
:focus-visible {
  outline:3px solid var(--berry-500);
  outline-offset:2px;
  border-radius:4px;
}

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--space-4); }

.pular-conteudo {
  position:absolute; left:-9999px; top:0;
  background:var(--surface); color:var(--ink);
  padding:var(--space-3) var(--space-4); z-index:100;
}
.pular-conteudo:focus { left:var(--space-4); top:var(--space-2); }

/* Botões: altura mínima de alvo, e nunca só cor para dizer o estado. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--alvo); padding:var(--space-3) var(--space-5);
  border:1px solid transparent; border-radius:var(--radius);
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
}
.btn-primario { background:var(--berry-800); color:#fff; }
.btn-primario:hover { background:var(--berry-600); }
.btn-secundario { background:var(--surface); color:var(--berry-800); border-color:var(--berry-500); }
.btn-discreto { background:transparent; color:var(--muted); }

.campo { display:block; margin-bottom:var(--space-5); }
.campo > label { display:block; font-weight:600; margin-bottom:var(--space-2); }
.campo .ajuda { display:block; color:var(--muted); font-size:.92rem; margin-bottom:var(--space-2); }
.campo input, .campo select, .campo textarea {
  width:100%; min-height:var(--alvo);
  padding:var(--space-3); font:inherit;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color:var(--berry-500); }

.aviso {
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface-alt); margin:0 0 var(--space-4);
}
.aviso-erro { border-color:var(--erro); background:#FDF2F1; }
.aviso-atencao { border-color:var(--atencao); background:#FDF8EC; }

.small { font-size:.9rem; color:var(--muted); }