/* ===================================================================
   tokens.css — Sidney Reis Borges · Modo Dual

   Toda cor, raio, tipo e espaço do site sai daqui. Os componentes em
   style.css nunca escrevem um valor literal: só leem var(--algo).

   É isso que faz o site inteiro trocar de modo mudando um atributo no
   <html>, e é isso que faz o alto contraste funcionar em todas as telas
   de uma vez, sem precisar remendar componente por componente.
   =================================================================== */

:root{
  /* ---- Escala tipográfica e medidas (iguais nos três modos) ---- */
  --fs-scale:1;                 /* controlada pela barra de acessibilidade */
  --maxw:1140px;
  --gutter:clamp(20px,4vw,32px);
  --sec-y:clamp(56px,8vw,112px);

  --font-ui:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-texto:'Newsreader',Georgia,'Times New Roman',serif;
  --font-dados:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Fonte dos títulos: o modo Pessoas troca para a serifada */
  --font-titulo:var(--font-ui);
  --peso-titulo:800;
  --track-titulo:-.035em;

  --raio:0px;                   /* Sistemas é anguloso; Pessoas arredonda */
  --raio-sm:0px;
  --raio-pill:0px;

  --dur:.45s;                   /* duração da troca de modo */

  /* ---- Identidade dupla ---------------------------------------------
     Estas duas cores NÃO trocam de papel com o modo: viridiana é sempre
     o analista de sistemas, amora é sempre o psicólogo. É o que faz as
     duas formações continuarem legíveis como duas, em qualquer tela.
     Os valores mudam por modo só o bastante para manter o contraste. */
  --sis:#35D6C0;
  --psi:#E48CB4;
  --sis-ink:#06110F;
  --psi-ink:#26101A;
  --glow:.2;                    /* intensidade dos halos de fundo */

  /* ---- Modo padrão: SISTEMAS (grafite + viridiana) ---- */
  --bg:#0B0F13;
  --surface:#111820;
  --surface-2:#161F29;
  --ink:#E7EEF2;
  --soft:#93A4AE;
  --faint:#828F9A;   /* 5.8:1 sobre o fundo — rótulos pequenos exigem 4.5:1 */
  --acc:#35D6C0;
  --acc-2:#35D6C0;
  --acc-ink:#06110F;            /* texto sobre o acento */
  --line:rgba(255,255,255,.13);
  --line-forte:rgba(255,255,255,.26);
  --chip:rgba(255,255,255,.06);
  --sombra:0 24px 60px -30px rgba(0,0,0,.75);
  --malha:1;                    /* opacidade da grade de fundo */
}

/* ---- Modo PESSOAS (linho + amora) ----------------------------------
   Claro, serifado e arredondado. O consultório não deve parecer um
   painel de servidor: quem chega aqui não tem pressa. */
:root[data-modo="pessoas"]{
  --bg:#F5F0EC;
  --surface:#FFFFFF;
  --surface-2:#FAF6F3;
  --ink:#22191E;
  --soft:#6B5B62;
  --faint:#736068;   /* 5.2:1 sobre o linho */
  --acc:#8E4767;
  --acc-2:#8E4767;
  --acc-ink:#FFFFFF;
  --line:rgba(34,25,30,.14);
  --line-forte:rgba(34,25,30,.3);
  --chip:rgba(142,71,103,.07);
  --sombra:0 24px 60px -34px rgba(60,30,45,.35);
  --malha:0;

  --font-titulo:var(--font-texto);
  --peso-titulo:600;
  --track-titulo:-.015em;
  --raio:16px;
  --raio-sm:10px;
  --raio-pill:40px;

  /* Sobre o linho a viridiana clara cai para 1.6:1. Escurecida até
     5.7:1; a amora do modo já passa e fica como está. */
  --sis:#0B6A5D;
  --psi:#8E4767;
  --sis-ink:#FFFFFF;
  --psi-ink:#FFFFFF;
  --glow:.14;
}

/* ---- Modo INTERSEÇÃO (petróleo + os dois acentos) -------------------
   Nem um nem outro: o fundo escuro da tecnologia com o acento do
   consultório presente. É onde as duas formações aparecem juntas. */
:root[data-modo="intersecao"]{
  --bg:#101A1D;
  --surface:#16242A;
  --surface-2:#1B2C33;
  --ink:#EAF2F1;
  --soft:#9BB0B0;
  --faint:#849A9A;   /* 6.0:1 sobre o petróleo */
  --acc:#35D6C0;
  --acc-2:#E48CB4;
  --acc-ink:#06110F;
  --line:rgba(255,255,255,.15);
  --line-forte:rgba(255,255,255,.3);
  --chip:rgba(255,255,255,.06);
  --sombra:0 24px 60px -30px rgba(0,0,0,.7);
  --malha:.8;

  --raio:6px;
  --raio-sm:4px;
  --raio-pill:40px;
  --glow:.24;
}

/* ===================================================================
   ALTO CONTRASTE
   Vence os três modos. Preto, branco e amarelo — a combinação que a
   baixa visão distingue com mais folga. Sombras e gradientes saem;
   bordas entram para delimitar cada área.
   =================================================================== */
body.hc{
  --bg:#000000;
  --surface:#000000;
  --surface-2:#000000;
  --ink:#FFFFFF;
  --soft:#FFFFFF;
  --faint:#FFFFFF;
  --acc:#FFE100;
  --acc-2:#FFE100;
  --acc-ink:#000000;
  --line:#FFFFFF;
  --line-forte:#FFFFFF;
  --chip:#000000;
  --sombra:none;
  --malha:0;
  /* A dupla sobrevive ao alto contraste: amarelo e branco sobre preto
     são distinguíveis e ambos passam de 15:1. Halos saem. */
  --sis:#FFE100;
  --psi:#FFFFFF;
  --sis-ink:#000000;
  --psi-ink:#000000;
  --glow:0;
}
body.hc *{text-shadow:none !important;box-shadow:none !important}
body.hc [class]{background-image:none !important}
body.hc a{text-decoration:underline}
body.hc img,body.hc svg.foto{outline:2px solid #fff}
/* Blocos ganham borda para não virarem um bloco preto só */
body.hc .cartao,body.hc .chip,body.hc .campo input,body.hc .campo textarea,
body.hc .campo select,body.hc .tbtn,body.hc .a11y-grupo,body.hc .painel,
body.hc .fato,body.hc .header,body.hc .crise,body.hc .aviso,body.hc .moldura{
  border:2px solid #fff !important;
}
body.hc .btn,body.hc .a11y-grupo button,body.hc .tbtn[aria-pressed="true"]{
  background:#FFE100 !important;color:#000 !important;border:2px solid #fff !important;
}
body.hc .btn *,body.hc .btn svg{color:#000 !important;stroke:#000 !important}
/* Halos e tintas dos blocos novos: fundo chapado, borda branca, cor só
   no texto e no ícone. Pseudo-elementos não são pegos pela regra de
   background-image acima, então saem aqui, um a um. */
body.hc .brilho,body.hc .porta::after{display:none !important}
body.hc .porta,body.hc .selo,body.hc .porta::before,body.hc .cartao::before{
  background:transparent !important;border-color:#fff !important;
}
body.hc .porta,body.hc .selo{border:2px solid #fff !important}
body.hc .porta::before,body.hc .cartao::before{background:#FFE100 !important}
body.hc .porta .ico,body.hc .cartao .ico{background:transparent !important;border:2px solid #fff !important}
/* Componentes das paginas internas: halos e tintas fora, borda branca
   em quem precisa de contorno, cor so no texto e no icone. */
body.hc .painel::after,body.hc .moldura::before{display:none !important}
body.hc .passo .n,body.hc .moldura .material-symbols-outlined{
  background:transparent !important;border:2px solid #fff !important;
}
body.hc .passo::before{background:#fff !important}
body.hc .lista li .material-symbols-outlined{color:#FFE100 !important}

/* ===================================================================
   MODO LEITURA
   Tira grade, textura e decoração; alarga a entrelinha e estreita a
   coluna. Pensado para dislexia, TDAH e para quem simplesmente quer
   ler sem o fundo competindo com o texto.
   =================================================================== */
body.leitura{--malha:0;--glow:0}
body.leitura .malha,body.leitura .traco,body.leitura .decor{display:none !important}
body.leitura{line-height:1.85}
body.leitura p,body.leitura li{max-width:62ch}
body.leitura .cartao,body.leitura .passo,body.leitura .porta,
body.leitura .painel{box-shadow:none}
/* O modo leitura tira textura: a grade fina dentro da moldura tambem sai. */
body.leitura .moldura::before{display:none}