/* EstudeFocado — camada ADITIVA de tokens (D1a, plano 2026-09).
   Regra de convivência: este arquivo só DECLARA variáveis novas e regras de
   acessibilidade que não existiam. Nenhuma regra de app.css / index.html é
   editada aqui; quem quiser um token novo lê daqui, quem já funciona não muda.
   Carregado depois de app.css e do <style> da landing, de propósito: em
   empate de especificidade, a regra daqui vence. */

/* ── tokens novos ─────────────────────────────────────────────────────────
   Os nomes não colidem com os que já existem (--bg, --red, --line...). O tema
   claro troca só o que precisa; os demais herdam da própria paleta. */
:root{
  --foco:var(--red);                     /* cor do anel de foco de teclado */
  --foco-anel:rgba(255,46,32,.28);       /* halo atrás do anel, sobre escuro */
  --erro:#FF4A2E;                        /* borda de campo inválido (era literal em 4 lugares) */
  --erro-tx:#FF7A63;                     /* texto da mensagem de erro */
  --toque:44px;                          /* alvo mínimo de toque (WCAG 2.5.8 / Apple HIG) */
  --dur:.16s;                            /* duração padrão de transição */
  --ease:cubic-bezier(.2,.9,.25,1);      /* curva já usada nas animações de entrada */
  --z-toast:900;                         /* acima de modal (ov) e abaixo de nada */
}
html[data-tema="claro"],body.light{
  --foco-anel:rgba(217,27,14,.22);
  --erro:#C8200F;
  --erro-tx:#A8250F;
}

/* ── foco visível ─────────────────────────────────────────────────────────
   Várias regras antigas apagam o outline (outline:none / outline:0) sem pôr
   nada no lugar: quem navega por Tab não vê onde está. :focus-visible só
   dispara no teclado (e em campo de texto), então o clique de mouse em botão
   continua limpo. O "html body :is(...)" existe para bater a especificidade
   de regras como ".v4 .ag4-nt input{outline:none}" sem precisar de !important. */
html body :is(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{
  outline:2px solid var(--foco);
  outline-offset:2px;
}
/* campo de texto: o anel gruda na borda para não brigar com o box-shadow
   vermelho que os inputs já desenham no :focus */
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea):focus-visible{
  outline-offset:1px;
}

/* ── alvo de toque ────────────────────────────────────────────────────────
   Só em tela de toque (pointer:coarse): no desktop os botões de ícone de
   27–36px ficam como estão, para não mexer em layout que já funciona. A
   lista é fechada de propósito — nada de min-height global em button. */
@media (pointer:coarse){
  html body :is(
    .ov-x,.sm-x,.sb-tema,.adm-preview-close,.nv-mb,.au-eye,
    .v4 .fg-play,.sim-hl button,.cfg-emoji,
    .sm-b button,.mos-st button,.m26-st button
  ){
    min-width:var(--toque);
    min-height:var(--toque);
  }
}

/* ── cores suaves (Laboratório: cor-suave) ────────────────────────────────
   O vermelho #FF2E20 é saturação 100% e, com halo, cansa a vista em sessão
   longa. Aqui ele vira um coral apagado da mesma família, o brilho (--glow)
   cai quase a zero — e com ele os ~40 halos rgba(255,46,32) do app.css, que
   são todos multiplicados por --glow — e o texto sai do branco quase puro.
   As variáveis vão no body porque é nele que o Laboratório põe a classe.
   O tema claro vem depois e é mais específico: sem isso os valores escuros
   daqui ganhariam de body.light. Toda variável trocada no escuro tem de ser
   trocada no claro também. */
body.ef-suave{
  --red:#E0574A;--red-d:#A8382D;--orange:#E8805F;--salmon:#F2B8A4;
  --tx:#ECE6E4;--tx-2:#ADA5A4;
  --glow:.12;
  --foco-anel:rgba(224,87,74,.28);
}
body.light.ef-suave{
  /* o branco puro de fundo era o outro incômodo: o fundo esquenta e os
     cartões ficam quase brancos por cima, separados por contraste leve */
  --bg:#F6F3F1;--panel:#FCFBFA;--panel-2:#F1EDEB;--panel-3:#E8E3E1;--line:#E0DAD7;
  --sb:#F3F0EE;--fundo-2:#F1EDEB;
  --red:#BF3A2E;--red-d:#962A21;--orange:#B9542F;--salmon:#A63A22;
  --tx:#2A2425;--tx-2:#5C5455;
  --glow:.04;
  --foco-anel:rgba(191,58,46,.22);
}
html:has(body.light.ef-suave){background:#F6F3F1}
/* o único halo vermelho que não passa por --glow */
body.ef-suave .rd-g.on .rd-fatia{filter:drop-shadow(0 0 4px rgba(224,87,74,.35))}