/* =============================================================================
   TOKENS — Dra. Vanessa Otavïanï
   FONTE ÚNICA DE VERDADE de toda decisão visual do site.

   Regra dura: nenhum valor cru fora deste arquivo. Nenhuma página inventa
   cor, tamanho, espaço, fio ou duração. Se um valor é preciso e não existe
   aqui, ele nasce aqui primeiro.

   Duas camadas, e a ordem importa:

     1. PRIMITIVOS  — o valor bruto, nomeado pelo que ELE É (--brand-aubergine).
                      Trocar um primitivo repinta o site inteiro.
     2. SEMÂNTICOS  — o papel que o valor cumpre (--ground, --ink, --hairline).
                      É o que o CSS e o HTML consomem. NUNCA consuma primitivo
                      direto numa página: o papel é que carrega a intenção.

   Os nomes semânticos são exatamente os que já circulam nas páginas — a
   camada primitiva entrou POR BAIXO, sem renomear nada.

   Ponte com o Tailwind: `tailwind.config.js` lê ESTE arquivo em tempo de
   build (scripts/ler-tokens.js) e gera as classes `bg-ground`, `text-ink`,
   `border-hairline`. Não existe uma segunda lista de cores para divergir da
   primeira. `npm test` reprova se as duas saírem de sincronia.
   ============================================================================= */

:root {

    /* ═══════════════════ 1. PRIMITIVOS — a paleta da marca ═══════════════════
       Estes são os ÚNICOS valores de cor que existem no projeto. Qualquer hex
       fora desta lista é vazamento (o guard reprova). */

    /* Aubergine — a cor do texto e das faixas escuras */
    --brand-aubergine-deep: #1D1329;
    --brand-aubergine: #281B36;
    --brand-slate: #3A3242;
    --brand-slate-soft: #655B70;
    --brand-mauve: #857A92;
    --brand-mauve-faint: #A79CB0;

    /* Violeta — o acento, nunca o fundo */
    --brand-violet: #6B46C1;
    --brand-violet-bright: #9333EA;
    --brand-lilac: #C4B5FD;
    --brand-lilac-pale: #E9D5FF;
    --brand-mist: #D6CFDE;

    /* Osso — o chão do site */
    --brand-bone: #F6F3EF;
    --brand-bone-deep: #EDE8E0;
    --brand-bone-line: #DDD6CC;
    --brand-bone-line-strong: #C7BEB2;

    --brand-white: #FFFFFF;

    /* Funcionais — fora da paleta por necessidade, não por gosto */
    --brand-error: #B4232B;
    /* Confirmação de envio. Verde escurecido para passar de 4,5:1 sobre
       --ground: o #1F7A5C que a home usava solto no HTML dá 4,03:1 e reprova
       em texto normal. Vive aqui porque um segundo formulário já ia inventar
       o próprio verde. */
    --brand-ok: #1A6B50;
    --brand-whatsapp: #25D366;
    /* Aviso (painel admin, task 3 do plano 5). Âmbar do Tailwind (amber-800)
       escurecido pelo mesmo motivo do --brand-ok: o amber-600 que os badges
       de "pendente"/"aguardando" usavam solto (#D97706, #F59E0B) dá 2,88:1
       sobre --ground e reprova até o piso de 3:1 de texto grande. #92400E dá
       6,41:1, calculado com a mesma fórmula de scripts/ler-tokens.test.js
       ("o contraste do numeral ordinal foi corrigido"). */
    --brand-warning: #92400E;

    /* Véus sobre fundo escuro (a alfa faz parte do token: rgba solto é
       vazamento tão grave quanto hex solto) */
    --brand-veil-line: rgba(255, 255, 255, 0.14);
    --brand-veil-edge: rgba(255, 255, 255, 0.22);
    --brand-veil-border: rgba(255, 255, 255, 0.35);
    --brand-veil-fill: rgba(255, 255, 255, 0.06);
    --brand-glass: rgba(246, 243, 239, 0.86);


    /* ═══════════════════ 2. SEMÂNTICOS — cor por papel ══════════════════════
       O que as páginas consomem. Os nomes já existiam; agora apontam para
       primitivos em vez de carregar o hex. */

    /* Compatibilidade — nomes herdados, ainda em uso em páginas antigas */
    --primary-dark: var(--brand-aubergine);
    --primary-medium: var(--brand-violet);
    --primary-light: var(--brand-violet-bright);

    /* Chão */
    --ground: var(--brand-bone);
    --ground-deep: var(--brand-bone-deep);
    --ground-dark: var(--brand-aubergine);
    --ground-darkest: var(--brand-aubergine-deep);

    /* Tinta */
    --ink: var(--brand-aubergine);
    --ink-body: var(--brand-slate);
    --ink-secondary: var(--brand-slate-soft);
    --ink-invert: var(--brand-white);
    --ink-invert-body: var(--brand-mist);
    --ink-placeholder: var(--brand-mauve-faint);

    /* Fios — a estrutura do site é feita deles, não de sombra */
    --hairline: var(--brand-bone-line);
    --hairline-strong: var(--brand-bone-line-strong);
    --hairline-invert: var(--brand-veil-line);
    --hairline-invert-strong: var(--brand-veil-edge);

    /* Superfícies sobre faixa escura */
    --border-invert: var(--brand-veil-border);
    --fill-invert-soft: var(--brand-veil-fill);
    --glass-header: var(--brand-glass);

    /* Acentos */
    --accent: var(--brand-violet);
    --accent-tick: var(--brand-violet-bright);
    --accent-lilac: var(--brand-lilac);
    --accent-lilac-pale: var(--brand-lilac-pale);

    /* Numerais ordinais — é uma tinta, por isso mora no grupo `ink`. Nome
       separado de --text-ordinal (o tamanho) porque `text-*` no Tailwind serve
       a cor E a escala: um nome só geraria duas regras conflitantes.
       #B9AFC6 dava 1,90:1 sobre --ground e reprovava até o piso de 3:1 para
       texto grande; --brand-mauve dá 3,65:1. */
    --ink-numeral: var(--brand-mauve);
    --ordinal: var(--ink-numeral);
    /* ^ alias herdado: em uso em design-system.css e microagulhamento-capilar.
         Some quando essas duas páginas passarem para o chrome único. */

    --error: var(--brand-error);
    --ok: var(--brand-ok);
    --whatsapp: var(--brand-whatsapp);
    /* Só no admin por enquanto (badges de pendente/aguardando, ver
       --brand-warning acima). Não é cor pública. */
    --warning: var(--brand-warning);


    /* ═══════════════════════════ 3. TIPOGRAFIA ══════════════════════════════ */

    --font-title: 'Recline', Georgia, 'Times New Roman', serif;
    --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;

    /* Recline existe SÓ nestes três pesos. font-bold com ela faz o navegador
       sintetizar o peso, e o resultado é sujo. Escala e espaço fazem o
       trabalho que o negrito faria. */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;

    /* Escala fluida. Os tetos não são redondos por acaso: 4.25rem é o que faz
       "Microagulhamento" — a palavra mais longa do site — caber na coluna do
       hero sem quebrar no meio. */
    --text-hero: clamp(2.75rem, 6.6vw, 5.5rem);
    --text-display: clamp(2.5rem, 5.6vw, 4.25rem);
    --text-section: clamp(2rem, 3.6vw, 2.875rem);
    --text-ordinal: clamp(2rem, 3vw, 2.75rem);
    --text-figure: clamp(1.75rem, 2.4vw, 2.125rem);
    --text-statement: clamp(1.5rem, 2.4vw, 2.125rem);
    --text-sub: clamp(1.25rem, 1.7vw, 1.5rem);
    --text-quote: clamp(1.1875rem, 1.7vw, 1.5rem);
    --text-body: 1.0625rem;
    --text-secondary: 0.9375rem;
    --text-fine: 0.8125rem;
    --text-micro: 0.6875rem;

    /* Altura de linha — quanto maior o tipo, mais apertada */
    --leading-flat: 1;
    --leading-display: 1.04;
    --leading-section: 1.08;
    --leading-sub: 1.25;
    --leading-statement: 1.35;
    --leading-quote: 1.4;
    --leading-fine: 1.6;
    --leading-body: 1.7;

    /* Tracking. Os três primeiros são fluidos porque tracking fixo em tipo
       fluido aperta demais no mobile e frouxa demais no desktop. */
    --track-hero: clamp(-1.94px, 1.49px - 0.28vw, -0.51px);
    --track-display: clamp(-1.5px, 1.15px - 0.216vw, -0.4px);
    --track-section: clamp(-0.69px, 0.946px - 0.128vw, -0.19px);
    --track-statement: -0.01em;
    --track-sub: -0.005em;
    --track-body: 0.003em;
    --track-secondary: 0.005em;
    --track-fine: 0.01em;
    --track-caps: 0.18em;
    --track-caps-tight: 0.14em;


    /* ════════════════════════════ 4. ESPAÇO ═════════════════════════════════
       Escala fechada. Um valor de espaço que não está aqui não deve existir. */

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2.5rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --space-4xl: 7.5rem;

    /* Ritmo vertical das seções — fluido, para não haver dois valores mágicos
       (72 no mobile, 120 no desktop) espalhados por 39 páginas. */
    --section-y: clamp(3.5rem, 7vw, 7.5rem);
    --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);


    /* ════════════════════════════ 5. LAYOUT ═════════════════════════════════ */

    --container: 1240px;
    --container-pad: var(--space-md);
    --container-pad-lg: var(--space-2xl);
    --gutter: var(--space-lg);

    /* Medida de leitura. Acima de ~68ch o olho perde a linha na volta. */
    --measure: 64ch;
    --measure-tight: 52ch;

    /* Coluna lateral do artigo (o índice "Neste artigo"). 15rem cabem os
       títulos de seção em duas linhas sem partir palavra, e sobram os 227px de
       vão que separam o índice da coluna de leitura a 1440px. */
    --column-aside: 15rem;

    /* Altura do cabeçalho fixo, medida no header renderizado: 76,8px no
       desktop e 72,8px no mobile — o maior serve aos dois.

       Existe para o salto de âncora parar ABAIXO do header. Sem ele, todo
       link interno ("#agendar", "#a-sessao", o índice do FAQ) leva o leitor a
       um ponto onde o título que ele foi buscar está escondido atrás da barra:
       a página parece ter pulado para o lugar errado. */
    --header-h: 4.8rem;

    /* Proporções de imagem. Existem como token porque cinco páginas escolhendo
       a própria proporção é questão de tempo — e proporção inconsistente entre
       páginas irmãs é o que denuncia que não há sistema. */
    --ratio-window: 3 / 2;
    --ratio-editorial: 4 / 5;


    /* ══════════════════════ 6. FIO, RAIO E ALVO ═════════════════════════════ */

    --rule: 1px;
    --rule-strong: 2px;

    /* Raio zero é decisão de marca, não ausência de decisão: o sistema é
       construído em fio reto. Existe como token para poder ser auditado. */
    --radius: 0;

    /* Alvo mínimo de toque (WCAG 2.5.5). Aparecia como 44px cravado em cinco
       componentes diferentes. */
    --touch: 44px;

    /* Elevação: NENHUMA. O sistema separa planos por fio e por chão, nunca por
       sombra. O token existe para que "sem sombra" seja explícito e auditável. */
    --shadow: none;


    /* ═══════════════════════════ 7. MOVIMENTO ═══════════════════════════════ */

    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 400ms;
    --dur-image: 600ms;


    /* ══════════════════════ 8. INTEGRAÇÃO DE IMAGEM ═════════════════════════
       As fotos não têm um pixel violeta. Sem gradação elas ficam como objeto
       colado sobre um sistema violeta-e-osso. São decisões de marca, não
       ajustes soltos de CSS — por isso vivem aqui e são auditáveis. */

    --grade-portrait: saturate(0.88) contrast(1.05);
    --grade-veil: var(--brand-violet);
    --grade-veil-opacity: 0.18;
    --grade-vignette: color-mix(in srgb, var(--brand-aubergine) 38%, transparent);

    /* Miniatura de artigo: seis fundos sem relação viravam erupção de cor na
       lista. Uma família só; a cor volta no hover. */
    --grade-thumb: grayscale(0.55) saturate(0.9) contrast(1.06);
    --grade-thumb-hover: grayscale(0) saturate(1) contrast(1.06);
}


/* ═══════════════════════════ MOVIMENTO REDUZIDO ═════════════════════════════
   Zera a duração na raiz: qualquer componente que consuma os tokens de duração
   obedece de graça, sem precisar da sua própria media query. */

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
        --dur-slow: 0ms;
        --dur-image: 0ms;
    }
}