/* ==========================================================================
   ChatISP: tokens do sistema visual
   Carregado ANTES de qualquer outro CSS, no site e nas paginas legais.

   Regras do sistema:
   - Nenhum arquivo deve escrever cor, espaco, raio ou peso a mao. Use var().
   - Escada de superficie curta e proposital: sup-0 a sup-3, mesmo matiz (157).
   - Espaco vertical de secao e UM valor fluido. Nao ha padding por breakpoint.
   - Tracking de titulo em em, nao em px, para nao esmagar o tipo no mobile.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* --- Superficies escuras (matiz 157, escada geometrica) --------------- */
    --sup-0: #070e0b;   /* base da pagina */
    --sup-1: #0b1410;   /* faixa alternada */
    --sup-2: #111c17;   /* cartao */
    --sup-3: #18251f;   /* elevado / hover */

    /* Espelhos de --sup-0 e --sup-1 que .em-papel NAO reescreve. Sao as cores
       que as divisas dos capitulos claros precisam alcancar exatamente para
       nao deixar degrau na juncao com a secao escura vizinha. */
    --base-pagina: #070e0b;
    --base-faixa: #0b1410;

    /* Aliases legados: mantidos para o CSS ainda nao migrado nao quebrar. */
    --fundo: var(--sup-0);
    --superficie: var(--sup-2);

    /* --- Bordas ---------------------------------------------------------- */
    --borda: #1e2c25;
    --borda-forte: #2c3f35;
    --borda-clara: #d9ddd1;
    --borda-clara-forte: #c3c9ba;

    /* --- Texto ----------------------------------------------------------- */
    --texto: #f1f5ee;
    --suave: #9fb1a6;
    /* O tenue e o tom mais apagado do sistema, e por isso mesmo o que mais
       arrisca sair do contraste minimo. Ele nunca aparece grande: as 98 regras
       que o usam declaram 11px, 12,5px ou 14px, longe dos 24px que liberariam
       a regra de 3:1. Entao ele tem de cumprir 4,5:1 sozinho, e nao contra a
       superficie mais escura: contra a mais CLARA em que pode cair, que e a
       --sup-3. O valor antigo (#6b7c73) dava 4,42 sobre --sup-0 e caia a 3,59
       sobre --sup-3. Reprovava nas quatro. Este cumpre 5,63 / 5,40 / 5,04 /
       4,58, do fundo mais escuro ao mais claro. */
    --tenue: #7c8e84;

    /* --- Superficie clara (capitulos de papel) ---------------------------
       A home alterna capitulo claro e capitulo escuro do inicio ao fim. Sao
       duas superficies de papel para que dois capitulos claros seguidos (com
       um escuro no meio) nao sejam a mesma folha: --papel e o marfim quente,
       --papel-2 e um degrau mais frio e um tom abaixo. */
    --papel: #f6f6f0;
    --papel-2: #eaece1;
    --papel-3: #ffffff;   /* cartao sobre papel */
    --tinta: #0c1510;
    --tinta-suave: #47564e;
    /* Mesma conta do --tenue, do outro lado: o papel mais escuro em que esta
       tinta pode cair nao e o --papel-2 (#eaece1) e sim o da folha fria
       (#e0e3d6). O valor antigo (#6f7d74) dava 3,98 no papel padrao e 3,32 na
       fria. Este cumpre 5,51 / 5,01 / 5,98 / 4,59 nas quatro folhas. */
    --tinta-tenue: #5b665f;

    /* --- Verde de marca -------------------------------------------------- */
    --verde: #61efb0;          /* acento sobre escuro */
    --verde-brilho: #8df7c9;   /* hover / realce */
    --verde-claro: #c6ffb2;    /* fundo do capitulo final */
    /* Espelho de --verde-claro que .em-papel NAO reescreve, pelo mesmo motivo
       de --base-pagina/--base-faixa. Quem pinta FUNDO com o menta tem de usar
       este: o capitulo final da home e `.secao em-papel secao-contato`, e o
       .em-papel do mesmo elemento reescrevia --verde-claro para o verde de
       tinta. A secao inteira saia verde ESCURO com o texto em --tinta por
       cima, ~1,6:1, a metade esquerda ilegivel. --verde-claro segue existindo
       para quem escreve TEXTO com ele (ai a reescrita e o comportamento certo,
       porque menta sobre papel nao se le). */
    --verde-capa: #c6ffb2;
    --verde-tinta: #097250;    /* acento legivel sobre papel: 4,56 na folha fria */
    --verde-vidro: rgba(97, 239, 176, .12);
    --verde-linha: rgba(97, 239, 176, .28);

    /* --- Sombras --------------------------------------------------------- */
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 14px 34px -14px rgba(0, 0, 0, .6);
    --sombra-3: 0 36px 90px -36px rgba(0, 0, 0, .72);
    --sombra-clara: 0 18px 44px -24px rgba(21, 35, 28, .3);
    --brilho-verde: 0 0 0 1px rgba(97, 239, 176, .2), 0 24px 70px -34px rgba(97, 239, 176, .45);

    /* --- Tipografia ------------------------------------------------------ */
    --fonte: Manrope, system-ui, -apple-system, sans-serif;
    --titulo: Sora, Manrope, system-ui, sans-serif;

    /* A terceira familia: nome de cabecalho HTTP, endpoint, trecho de JSON,
       hash de licenca. Nao ha webfont: e a mono do proprio sistema, que
       chega sem custo de rede e ja e a que a pessoa esta acostumada a ver
       em codigo.

       Virou token em 20/09/2026. Antes a pilha estava escrita a mao em SEIS
       lugares e em QUATRO versoes diferentes: umas com SFMono-Regular, outras
       com "SF Mono", umas com Consolas, outras sem. Os dois nomes da Apple
       nao sao alternativa um do outro, porque resolvem em navegadores
       diferentes; entao metade das folhas caia em Menlo onde a outra metade
       pegava a SF Mono. Ninguem ve esse tipo de erro: o texto so fica um
       pouco diferente de uma pagina para a outra. */
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* O corpo do <code> inline, e o unico tamanho da escala escrito em em de
       propósito: monoespacada tem altura-x maior que a Manrope, e no mesmo
       corpo ela parece maior. 0,9 iguala o que o olho ve.

       Em em, e nao em px, porque o mesmo <code> aparece no lead da capa
       (--c1), no corpo do texto (--c2) e dentro de uma <dd> (--c3): relativo,
       ele encolhe junto; em px ficaria certo num lugar e errado em dois.

       Tres folhas declaram <code> inline (.prosa, .pagina-api e
       .credenciais), e continuam tres porque os escopos sao diferentes.
       O que nao pode divergir e a medida: antes eram 0,9 em duas e 0,92 na
       terceira, e a terceira estava um fio maior sem que ninguem tivesse
       decidido isso. */
    --corpo-mono: .9em;

    /* Os dois primeiros degraus sao QUEBRADOS, e nao um clamp simples, porque
       um clamp so tem um piso, e o piso que serve a um tablet nao serve a um
       celular de 320px. Com `clamp(34px, 4.2vw, 62px)`, --t2 ficava travado em
       34px em TODA tela abaixo de 810px: medido em 21/09/2026, o h2 do #contato
       dava SEIS linhas de 11 caracteres numa coluna de 292px.

       `max(rampa-estreita, rampa-larga)` costura duas retas. Abaixo de ~810px
       manda a rampa estreita, que desce de 34px ate 27px em 360px; acima, a
       rampa larga de sempre (4.2vw ate 62px), que nesse ponto ja passou a
       estreita e assume sozinha. As duas se encontram exatamente em 810px, que
       e onde 4.2vw vale 34px. A emenda nao tem degrau.

       Mesma costura em --t1, pelo mesmo motivo e no mesmo ponto proporcional.
       De --t3 para baixo o piso ja e pequeno o bastante e o clamp basta. */
    --t1: max(clamp(32px, calc(24.6px + 2.05vw), 42px), min(6.2vw, 92px));
    --t2: max(clamp(27px, calc(21.4px + 1.56vw), 34px), min(4.2vw, 62px));
    --t3: clamp(26px, 2.8vw, 40px);
    /* --t4 leva a mesma costura, e e o degrau que mais aparece: e o h3 dos
       cartoes e o h1 das capas de artigo abaixo de 680. Travado em 21px, um
       titulo de 61 caracteres dentro de um cartao de 292px saia com quatro
       linhas de 15. A rampa estreita vai de 18px em 320 ate os 21px de sempre
       em 640, e dai para cima nada muda. */
    --t4: max(clamp(18px, calc(15px + 0.94vw), 21px), min(1.7vw, 25px));
    --t5: 18px;
    --t6: 15px;

    --c1: clamp(17px, 1.25vw, 19px);  /* linha de apoio do titulo */
    --c2: 16px;                        /* corpo */
    --c3: 14px;                        /* apoio */
    --c4: 12.5px;                      /* micro */
    --c5: 11px;                        /* sobretitulo */

    /* A escala de tracking e OTICA: ela acompanha o tamanho, nao o gosto. Tipo
       grande precisa fechar, tipo pequeno precisa abrir. Os tres primeiros sao
       negativos e cada um tem a sua faixa. Usar o de cima numa faixa de baixo
       e o erro classico, e foi exatamente o que aconteceu aqui: 63 regras
       aplicavam o --tk1 (calibrado para 42-92px) em 11px e 12,5px. A -,045em o
       11px perde meio pixel por vao, e o vao que primeiro morre e o do ESPACO:
       "15 de setembro de 2026" saia lido como "15desetembrode2026". */
    --tk1: -.045em;      /* --t1 e --t2: 34px para cima */
    --tk2: -.035em;      /* --t3 e --t4: 21 a 40px */
    --tk3: -.025em;      /* --t5, --c1 e --c2: 16 a 19px */
    /* Do outro lado da escala. Positivo de proposito: abaixo de 14px as letras
       precisam de mais ar, e mais ainda neste site, que e claro sobre escuro.
       Texto claro em fundo escuro floresce e parece mais apertado do que e. */
    --tk-micro: .01em;   /* --c4 e --c5: 12,5px e 11px */
    --tk-largo: .16em;   /* sobretitulos em CAIXA ALTA, em qualquer tamanho */

    --p-normal: 400;
    --p-medio: 500;
    --p-forte: 700;
    --p-max: 800;

    /* --- Espaco ---------------------------------------------------------- */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 24px;
    --e6: 32px;
    --e7: 48px;
    --e8: 64px;
    --e9: 96px;

    /* Um unico ritmo vertical para TODAS as secoes. Fluido, sem breakpoint. */
    --esp-secao: clamp(76px, 8.6vw, 132px);
    --esp-secao-curta: clamp(48px, 5vw, 72px);
    --esp-bloco: clamp(40px, 4.6vw, 72px);
    --esp-grid: clamp(32px, 4.4vw, 72px);

    --container-max: 1440px;
    --container-gutter: clamp(28px, 5vw, 112px);

    /* --- Raio ------------------------------------------------------------ */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 999px;

    /* --- Movimento -------------------------------------------------------
       Quatro duracoes e quatro curvas. Nenhum arquivo escreve ms ou cubic-
       bezier a mao; quem precisa de um tempo intermediario usa calc() sobre
       um destes. --ease-saida e para quem sai de cena, --ease-firme para
       transformacoes de UI curtas, --ease-solto para entradas longas. */
    --ease: cubic-bezier(.2, .65, .25, 1);
    --ease-saida: cubic-bezier(.4, 0, .2, 1);
    --ease-firme: cubic-bezier(.34, .01, .18, 1);
    --ease-solto: cubic-bezier(.16, 1, .3, 1);
    --dur-1: 160ms;
    --dur-2: 280ms;
    --dur-3: 520ms;
    --dur-4: 900ms;

    /* Sombra que uma faixa escura projeta contra um capitulo claro vizinho.
       Fica sempre DENTRO do escuro: o percurso entre papel e preto passa pelo
       cinza, e atravessa-lo suja a divisa (ver SITE.md, 20/09/2026). */
    --divisa-altura: 130px;
    --divisa-cor: rgba(0, 0, 0, .58);
}

/* Bloco de contexto claro: qualquer secao com .em-papel reescreve os tokens
   de texto/borda/acento, para que os componentes funcionem nos dois temas sem
   precisar de uma variante propria por componente. */
.em-papel {
    --texto: var(--tinta);
    --suave: var(--tinta-suave);
    --tenue: var(--tinta-tenue);
    --borda: var(--borda-clara);
    --borda-forte: var(--borda-clara-forte);
    --sup-0: var(--papel);
    --sup-1: var(--papel-2);
    --sup-2: var(--papel-3);
    --sup-3: var(--papel-3);
    --verde: var(--verde-tinta);
    --verde-brilho: #0f6146;
    /* --verde-claro e fundo de secao no escuro; sobre papel ele so existia
       como texto e saia ilegivel (contraste ~1.3). Aqui ele passa a ser o
       mesmo acento escuro, um degrau mais claro: quem escreveu
       `color: var(--verde-claro)` continua legivel nos dois capitulos.
       "Um degrau mais claro" tinha ido longe demais: #128a60 dava 4,01 sobre
       o papel padrao e 3,34 sobre a folha fria, e os quatro usos dele
       (.conversa-avatar, .conversa-nota span, .fatura-fonte, .ficha-avatar)
       sao todos de 11px, onde nao ha isencao de texto grande. Este ainda le
       como o degrau mais claro e cumpre 4,55 no pior caso. */
    --verde-claro: #0f7250;
    --verde-vidro: rgba(10, 122, 85, .08);
    --verde-linha: rgba(10, 122, 85, .22);
    --sombra-1: 0 1px 2px rgba(21, 35, 28, .08);
    --sombra-2: var(--sombra-clara);
    --sombra-3: 0 30px 70px -34px rgba(21, 35, 28, .34);
    --brilho-verde: 0 0 0 1px rgba(10, 122, 85, .18), 0 24px 60px -34px rgba(10, 122, 85, .3);
    color-scheme: light;
}

/* Segunda folha. Todo capitulo claro usa .em-papel; os que caem em posicao
   par na alternancia trocam a folha por esta, um degrau mais frio, para que
   dois capitulos claros da mesma pagina nao sejam a mesma superficie. */
.em-papel--fria {
    --papel: #eaece1;
    --papel-2: #e0e3d6;
    --papel-3: #f7f8f2;
}