/*
 * Tokens de design — Família Fontana
 *
 * ÚNICO lugar do site com cor, fonte, tamanho de texto, espaçamento,
 * raio e sombra. Componentes e páginas usam só var(--...).
 * Mudou aqui, muda no site inteiro.
 *
 * Origem dos valores: export do Claude Design (paleta azul/ouro/creme)
 * conferido contra as cores medidas no brasão (escudo #3C4890→#1878B4,
 * grifos #CCA860). Os ~60 valores soltos do export foram reduzidos aos
 * abaixo; contraste WCAG medido para cada par de uso.
 */

:root {
  /* ---------- Cores de marca ---------- */
  --cor-azul-noite: #1A2360;   /* navbar, títulos. Creme sobre ele: 12,8:1 */
  --cor-azul-escudo: #2C3A94;  /* fundo da abertura; tom do escudo do brasão */
  --cor-azul-rodape: #22307F;  /* fundo do rodapé */
  --cor-ouro: #C89B5C;         /* filetes, ícones e texto SÓ sobre azul (5,7:1 no azul-noite).
                                  Sobre creme dá 2,2:1: reprovado para texto */
  --cor-ouro-claro: #E8CC9C;   /* texto dourado PEQUENO sobre azul (rótulos da abertura e do rodapé).
                                  O #C89B5C dava 3,9:1 no azul-escudo e 3,0:1 no centro claro do
                                  gradiente da abertura (#3A4BAD); este dá 4,9:1 no pior ponto */
  --cor-ouro-texto: #8A6630;   /* ouro escurecido para texto sobre fundo claro (4,6:1 no creme) */
  --cor-celeste: #1A6BB0;      /* links. O #1E76C4 do export dava 4,2:1 no creme (reprova);
                                  este dá 4,9:1 e segue o azul claro do escudo */

  /* ---------- Fundos e linhas ---------- */
  --cor-creme: #F5F1E8;        /* fundo geral */
  --cor-papel: #FFFDF8;        /* cards e áreas de leitura */
  --cor-branco: #FFFFFF;       /* fundo das fichas e molduras de foto (o export usa branco puro, 51x) */
  --cor-linha: #DDD7C8;        /* bordas e divisórias */

  /* ---------- Texto ---------- */
  --cor-texto: #2A2F3A;        /* corpo (11,9:1 no creme) */
  --cor-texto-suave: #565C68;  /* legendas, datas, metadados (6,0:1). Substitui os 7 cinzas do export */
  --cor-texto-invertido: #F5F1E8; /* texto sobre os azuis */
  /* Creme translúcido sobre azul, como no export. Contraste medido no pior fundo (rodapé #22307F): */
  --cor-invertido-78: rgba(245, 241, 232, 0.78); /* links da navbar — 7,0:1 */
  --cor-invertido-68: rgba(245, 241, 232, 0.68); /* texto do rodapé — 5,6:1 */
  --cor-invertido-60: rgba(245, 241, 232, 0.60); /* rótulos do rodapé — 4,8:1. O export usava 0,45 (3,3:1, reprova) */
  --cor-ouro-filete: rgba(200, 155, 92, 0.45);   /* borda inferior da navbar */
  --cor-navbar: rgba(26, 35, 96, 0.96);          /* azul-noite quase opaco, com desfoque atrás */
  --desfoque-navbar: blur(10px);
  --cor-erro: #9A2B2B;         /* mensagens de erro de formulário (6,8:1) */

  /* ---------- Fontes ----------
     Só os pesos realmente usados nas páginas do export (6 arquivos, eram 18).
     Cormorant Garamond saiu: aparecia apenas no manual de marca. */
  --fonte-marca: 'Cinzel Decorative', Georgia, serif; /* só o nome "Família Fontana" — peso 700 */
  --fonte-titulo: 'Cinzel', Georgia, serif;           /* títulos — pesos 400 e 600 */
  --fonte-texto: 'Work Sans', Arial, sans-serif;      /* corpo — 400, 600 e 300 itálico */

  /* ---------- Escala tipográfica ----------
     Fórmulas copiadas do export do Claude Design (mesma curva, não só os
     mesmos extremos), para o texto ter o mesmo tamanho em QUALQUER largura.
     O clamp existe só aqui; componentes usam var(--texto-*). */
  --texto-micro:    0.6875rem;                          /* 11 px — rótulo de card e de ficha */
  --texto-rotulo:   0.75rem;                            /* 12 px — rótulos em caixa alta, navbar */
  --texto-mini:     0.8125rem;                          /* 13 px — marca na navbar, botões */
  --texto-pequeno:  0.875rem;                           /* 14 px — legendas, datas */
  --texto-ficha:    0.9375rem;                          /* 15 px — subtítulos em caixa alta */
  --texto-base:     1rem;                               /* 16 px — tamanho do body, como no export */
  --texto-corpo:    1.0625rem;                          /* 17 px — fichas e texto corrido */
  --texto-kicker:   clamp(0.8125rem, 1.69vw, 0.975rem);  /* 13→15,6 px — rótulo acima do título */
  --texto-kicker-fixo: 0.975rem;                        /* 15,6 px — "OS DEZ FILHOS…" (fixo no export) */
  --texto-destaque: clamp(1.125rem, 2vw, 1.25rem);       /* 18→20 px — cards, rodapé (14x no export) */
  --texto-apoio:    clamp(1.125rem, 2vw, 1.3125rem);     /* 18→21 px — texto de card e da linha do tempo */
  --texto-item:     clamp(1.125rem, 2.2vw, 1.375rem);    /* 18→22 px — itens da linha do tempo */
  --texto-ano:      clamp(1.125rem, 2.4vw, 1.5rem);      /* 18→24 px — anos da linha do tempo */
  --texto-intro:    clamp(1.1875rem, 2.1vw, 1.375rem);   /* 19→22 px — frase abaixo do título de seção */
  --texto-leitura:  clamp(1.1875rem, 2.1vw, 1.4375rem);  /* 19→23 px — parágrafos longos */
  --texto-h4:       clamp(1.25rem, 2.3vw, 1.5rem);       /* 20→24 px — título de card */
  --texto-h3:       clamp(1.5rem, 3vw, 2rem);            /* 24→32 px */
  --texto-citacao:  clamp(1.25rem, 2.8vw, 2rem);         /* 20→32 px — frase da abertura */
  --texto-h2:       clamp(1.875rem, 4.4vw, 3rem);        /* 30→48 px — título de seção */
  --texto-h1:       clamp(2.25rem, 7vw, 4.75rem);        /* 36→76 px — nome na abertura */
  --texto-h1-pagina: clamp(2rem, 5vw, 3.5rem);           /* 32→56 px — título no topo das páginas internas */
  --texto-titulo-post: clamp(1.75rem, 4vw, 2.75rem);     /* 28→44 px — título do post */
  --texto-titulo-lista: clamp(1.5rem, 2.8vw, 2rem);      /* 24→32 px — título na lista de posts */
  --texto-resumo:   clamp(1.125rem, 1.9vw, 1.25rem);     /* 18→20 px — resumo na lista */
  --texto-meta:     1rem;                                /* 16 px — autor e data na lista */
  --texto-migalha:  0.9375rem;                           /* 15 px — "Notícias / Pesquisa" */
  --texto-micro-post: 0.71875rem;                        /* 11,5 px — rótulos do post */
  --texto-relacionado: 1.125rem;                         /* 18 px — título em "Leia também" */
  --texto-abertura-rotulo: clamp(0.8125rem, 1.82vw, 1.05625rem); /* 13→16,9 px — "TISOI, BELLUNO…" */

  --entrelinha-titulo: 1.12;
  --entrelinha-texto: 1.65;
  --espacamento-caixa-alta: 0.2em; /* rótulos e navegação em maiúsculas */
  /* Espaçamento entre letras do export, por uso */
  --tracking-nav: 0.16em;     /* links da navbar */
  --tracking-marca: 0.22em;   /* "FAMÍLIA FONTANA" na navbar */
  --tracking-rotulo: 0.28em;  /* rótulos de seção e do rodapé */
  --tracking-abertura: 0.4em; /* "TISOI, BELLUNO · 1830 ATÉ HOJE" */
  --tracking-titulo: 0.02em;  /* títulos em Cinzel */
  --tracking-nome: 0.03em;    /* "Família Fontana" no rodapé e na abertura */
  --tracking-card: 0.24em;    /* rótulo de card ("ENCONTROS · 6 DE SETEMBRO") */
  --tracking-kicker: 0.3em;   /* rótulo acima de bloco ("DE ONDE VEIO…") */
  --tracking-kicker-largo: 0.36em;

  /* ---------- Espaçamento ---------- */
  --espaco-1: 0.25rem;  /*  4 px */
  --espaco-1-5: 0.375rem; /* 6 px — abaixo do rótulo das fichas */
  --espaco-2: 0.5rem;   /*  8 px */
  --espaco-3: 0.75rem;  /* 12 px */
  --espaco-4: 1rem;     /* 16 px */
  --espaco-4-5: 1.125rem; /* 18 px — espaçamento interno recorrente no export (rodapé, cards) */
  --espaco-5: 1.5rem;   /* 24 px */
  --espaco-6: 2rem;     /* 32 px */
  --espaco-7: 3rem;     /* 48 px */
  --espaco-8: 4rem;     /* 64 px */
  --espaco-secao: clamp(3.75rem, 9vw, 6.75rem);  /* 60→108 px, topo/base de seção (fórmula do export) */
  --margem-lateral: clamp(1.25rem, 5vw, 3rem);   /* 20→48 px, laterais das seções (fórmula do export) */
  --largura-conteudo: 70rem;  /* 1120 px */
  --largura-navbar: 73.75rem; /* 1180 px de conteúdo, como no export */
  /* Curvas próprias da navbar e do rodapé no export (diferentes da margem geral).
     Mantidas iguais para a posição do brasão e dos links bater com o Claude Design. */
  --margem-navbar: clamp(1rem, 4vw, 2.5rem);          /* 16→40 px */
  --navbar-respiro: 0.6875rem;                        /* 11 px acima e abaixo: navbar de 57 px */
  --navbar-espaco: 0.625rem 1.625rem;                 /* 10 × 26 px entre marca e menu */
  --navbar-espaco-links: 0.375rem 1.25rem;            /* 6 × 20 px entre os links */
  --rodape-respiro-topo: clamp(3.25rem, 7vw, 5.5rem);  /* 52→88 px */
  --rodape-respiro-base: clamp(1.75rem, 3.5vw, 2.5rem);/* 28→40 px */
  --rodape-margem: clamp(1.25rem, 5vw, 4rem);          /* 20→64 px */
  --rodape-colunas-espaco: clamp(2.125rem, 5vw, 4rem); /* 34→64 px */
  --largura-rodape: 77.5rem;  /* 1240 px, como no export */
  /* Altura da navbar fixa. Medida em cada largura (ela quebra em até 4 linhas no
     celular) e já definida aqui, para o espaço existir antes do JavaScript: se
     o valor só chegasse depois, o topo das páginas pularia (CLS). O JS de
     componentes.js ainda corrige com a altura exata. */
  --altura-navbar: 11.0625rem; /* 177 px abaixo de 356 px de largura */
  --espaco-card: clamp(1.5rem, 3vw, 2rem);                  /* 24→32 px, respiro interno do card */
  --espaco-botao: 0.875rem 1.75rem;                         /* 14 px × 28 px, como no export */
  --tamanho-brasao-nav: 2.125rem;    /* 34 px */
  --tamanho-brasao-rodape: 5.75rem;  /* 92 px */
  --largura-leitura: 44rem;   /* ~70 caracteres por linha em artigo */

  /* ---------- Blocos da página (medidas do export) ---------- */
  --largura-arvore: 82.5rem;                                  /* 1320 px, chamada da árvore */
  --abertura-respiro-topo: clamp(7.375rem, 15vh, 11.25rem);  /* 118→180 px */
  --abertura-respiro: var(--abertura-respiro-topo) var(--margem-lateral) clamp(4.75rem, 10vh, 7.25rem);
  --abertura-espaco: clamp(1.375rem, 3.5vh, 2.25rem);         /* 22→36 px entre os itens da abertura */
  --abertura-moldura: clamp(0.625rem, 2vw, 1.375rem);         /* 10→22 px, filete dourado interno */
  --abertura-brasao: clamp(10.625rem, 24vw, 18.125rem);       /* 170→290 px */
  --abertura-filete: clamp(7.5rem, 20vw, 12.5rem);            /* 120→200 px */
  --espaco-bloco: clamp(1.75rem, 4vw, 3.5rem);                /* 28→56 px entre colunas */
  --espaco-bloco-grande: clamp(2.5rem, 5vw, 4rem);            /* 40→64 px entre blocos */
  --espaco-titulo: clamp(1.75rem, 4vw, 2.75rem);              /* 28→44 px abaixo do título "Origem" */
  --espaco-titulo-secao: 0.875rem;                            /* 14 px abaixo do título de seção */
  --espaco-intro: clamp(2rem, 5vw, 3.125rem);                 /* 32→50 px abaixo da frase de seção */
  --espaco-lista: clamp(1.5rem, 4vw, 3rem);                   /* 24→48 px entre as duas listas de filhos */
  --espaco-paragrafo-final: clamp(1.5rem, 3vw, 2rem);
  --linha-tempo-ano: clamp(4.125rem, 10vw, 6.75rem);          /* 66→108 px, coluna dos anos */
  --linha-tempo-coluna: clamp(0.75rem, 2vw, 1.5rem);          /* 12→24 px entre ano, ponto e texto */
  --linha-tempo-item: clamp(1.75rem, 4vw, 2.625rem);          /* 28→42 px entre eventos */
  --altura-foto-raizes: clamp(15.625rem, 32vw, 22.5rem);      /* 250→360 px */
  --espaco-chamada: clamp(1.5rem, 3vw, 2.125rem);
  --fundo-abertura: radial-gradient(ellipse at 50% 22%, #3A4BAD 0%, #26317F 55%, var(--cor-azul-noite) 100%);
  --padrao-aneis: repeating-radial-gradient(circle at 50% 118%, rgba(220, 225, 231, 0.16) 0 1.5px, transparent 1.5px 26px);
  --padrao-diagonal-escuro: repeating-linear-gradient(45deg, rgba(200, 155, 92, 0.07) 0 1px, transparent 1px 28px);
  --padrao-diagonal-claro: repeating-linear-gradient(45deg, rgba(200, 155, 92, 0.05) 0 1px, transparent 1px 24px);
  --cor-ouro-moldura: rgba(200, 155, 92, 0.32);
  --cor-ouro-trilho: rgba(200, 155, 92, 0.38);                /* linha vertical da linha do tempo */
  --cor-invertido-72: rgba(245, 241, 232, 0.72);              /* texto da linha do tempo — conferir contraste */
  --cor-invertido-70: rgba(245, 241, 232, 0.70);
  --cor-invertido-86: rgba(245, 241, 232, 0.86);              /* frase da abertura */
  --ponto-linha-tempo: 0.75rem;                               /* 12 px */
  --ponto-deslocamento: 0.5625rem;                            /* 9 px: alinha o ponto à linha do ano */

  /* Topo das páginas internas (Notícias, Encontros) */
  --topo-respiro-topo: clamp(6.5rem, 13vh, 9.375rem);        /* 104→150 px */
  --topo-respiro: var(--topo-respiro-topo) var(--margem-lateral) clamp(3rem, 6vw, 4.5rem);
  --topo-brasao: clamp(4rem, 7vw, 5.75rem);                    /* 64→92 px */
  --fundo-topo: radial-gradient(ellipse at 50% 0%, #35459F 0%, #26317F 60%, var(--cor-azul-noite) 100%);
  --padrao-aneis-topo: repeating-radial-gradient(circle at 50% 130%, rgba(220, 225, 231, 0.12) 0 1.5px, transparent 1.5px 28px);
  /* Lista e post */
  --pagina-respiro: clamp(1.75rem, 4vw, 3.5rem) var(--margem-lateral) clamp(2.5rem, 6vw, 5rem);
  --espaco-lista-posts: clamp(1.75rem, 4vw, 2.75rem);
  --espaco-chips: clamp(1.5rem, 3vw, 2.25rem);
  --espaco-card-post: clamp(1.75rem, 3.4vw, 2.75rem);
  --espaco-post: clamp(1.5rem, 3vw, 3.5rem);
  --espaco-post-bloco: clamp(1.875rem, 4vw, 3rem);
  --espaco-chamada-lista: clamp(2.125rem, 4vw, 3.375rem);
  --espaco-chip: 0.6875rem 1.125rem;                           /* 11 × 18 px */
  --espaco-migalha: 1.625rem;                                  /* 26 px */

  /* Árvore genealógica. No export esta página usa a escala 1,2x das demais
     (13,8 / 16,2 / 20,4 px…); mantida para ficar igual. */
  --cor-areia: #EEE7D6;                          /* fundo de molduras de foto e do cabeçalho de ramo */
  --cor-borda-azul: rgba(26, 35, 96, 0.18);      /* borda de cartões da árvore */
  --cor-borda-azul-leve: rgba(26, 35, 96, 0.12); /* moldura da área da árvore */
  --cor-divisoria-azul: rgba(26, 35, 96, 0.10);  /* divisórias internas */
  --cor-conector: rgba(26, 35, 96, 0.20);        /* linhas que ligam as gerações */
  --cor-tracejado: rgba(26, 35, 96, 0.35);       /* 5ª geração */
  --cor-ouro-fato: rgba(200, 155, 92, 0.60);     /* moldura do "Fato interessante" */
  --cor-invertido-branco-78: rgba(255, 255, 255, 0.78);
  --cor-invertido-branco-60: rgba(255, 255, 255, 0.60);
  --cor-invertido-branco-25: rgba(255, 255, 255, 0.25);
  --texto-arvore-rotulo: 0.8625rem;  /* 13,8 px */
  --texto-arvore-meta: 1.0125rem;    /* 16,2 px */
  --texto-arvore-conjuge: 1.0875rem; /* 17,4 px */
  --texto-arvore-nota: 1.125rem;     /* 18 px */
  --texto-arvore-link: 1.2rem;       /* 19,2 px */
  --texto-arvore-nome: 1.275rem;     /* 20,4 px */
  --texto-arvore-bio: 1.35rem;       /* 21,6 px */
  --texto-arvore-no: 0.9375rem;      /* 15 px — cônjuge nos nós da 4ª geração */
  --texto-arvore-pessoa: clamp(1.95rem, 3.84vw, 2.7rem);   /* 31,2→43,2 px — nome na página da pessoa */
  --texto-h1-arvore: clamp(2.4rem, 6vw, 4.2rem);            /* 38,4→67,2 px — título do topo da árvore */
  /* "GENEALÓGICA" mede 8,2 vezes o tamanho da letra em Cinzel Decorative. Abaixo
     de ~360 px ela não cabia na tela e era cortada (também no export); o limite
     abaixo reduz a letra só o necessário para a palavra caber. */
  --texto-h1-arvore-cabe: min(var(--texto-h1-arvore), calc((100vw - 2 * var(--margem-lateral)) / 8.4));
  --arvore-respiro: clamp(2.125rem, 4vw, 3.75rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4.375rem);
  --arvore-espaco-grade: clamp(0.625rem, 1.4vw, 1.125rem);
  --arvore-recuo: 6%;               /* margem lateral das grades de geração */
  --arvore-conector: 2.875rem;      /* 46 px */
  --arvore-conector-curto: 1.125rem;/* 18 px */
  --arvore-traco: 0.875rem;         /* 14 px, traço horizontal até cada nó */
  --arvore-recuo-quinta: 1.375rem;  /* 22 px */
  --arvore-rotulo-vazio: 1.8125rem; /* 29 px: o export tem um rótulo vazio (<br>) acima do título */
  --pessoa-respiro: clamp(1.5rem, 3vw, 3rem);
  --pessoa-retrato: clamp(18.75rem, 36vw, 26.25rem);        /* 300→420 px */
  --pessoa-colunas: clamp(1.5rem, 3vw, 2.75rem);
  --pessoa-rotulo-ligacao: 8.125rem;/* 130 px */
  --altura-album: 12.5rem;          /* 200 px */

  /* Painel de edição — feito para pessoa idosa, no computador: letra de 20 px,
     botões com 56 px de altura (alvo fácil para o mouse), espaço generoso. */
  --p-texto: 1.25rem;          /* 20 px — texto e campos do painel */
  --p-texto-dica: 1.0625rem;   /* 17 px — dicas abaixo dos rótulos */
  --p-titulo: 2.125rem;        /* 34 px — título de cada tela */
  --p-subtitulo: 1.5rem;       /* 24 px */
  --p-escolha: 1.5rem;         /* 24 px — texto dos botões grandes da tela inicial */
  --p-botao-altura: 3.5rem;    /* 56 px */
  --p-botao-respiro: 0 1.5rem;
  --p-campo-altura: 3.5rem;    /* 56 px */
  --p-largura: 50rem;          /* 800 px — linhas curtas de ler */
  --p-largura-estreita: 32rem;
  --p-borda-grossa: 2px;
  --cor-p-foco: #1A2360;       /* contorno de foco escuro e grosso, visível sobre o creme */
  --campo-borda: #8A8F9A;            /* borda de campo: 3,2:1 no papel (mínimo AA para componentes) */
  --campo-respiro: 0.625rem 0.75rem;
  --cor-sucesso: #1D6B35;            /* 6,2:1 no papel */
  --cor-fundo-erro: #FBEDED;
  --cor-fundo-sucesso: #E9F4EC;
  --largura-painel-estreito: 28rem;

  /* ---------- Raio e sombra ---------- */
  --linha-fina: 1px;   /* espessura de bordas e filetes */
  --linha-media: 2px;  /* contorno do último ponto da linha do tempo */
  --raio-0: 0;          /* padrão: o export usa cantos retos, estilo heráldico */
  --raio-pilula: 999px; /* chips de filtro */
  --sombra-card: 0 1px 2px rgba(26, 35, 96, 0.10), 0 8px 24px rgba(26, 35, 96, 0.08);
  --sombra-brasao: 0 22px 46px rgba(0, 0, 0, 0.42); /* usada com filter: drop-shadow */

  /* ---------- Foco (acessibilidade) ---------- */
  --foco-contorno: 2px solid var(--cor-ouro);
  --foco-afastamento: 3px;
}

/* Altura da navbar por faixa de largura (medida em 2026-09-24). */
@media (min-width: 356px)  { :root { --altura-navbar: 9.25rem; } }   /* 148 px */
@media (min-width: 411px)  { :root { --altura-navbar: 7.4375rem; } } /* 119 px */
@media (min-width: 806px)  { :root { --altura-navbar: 5.625rem; } }  /* 90 px */
@media (min-width: 1051px) { :root { --altura-navbar: 3.5625rem; } } /* 57 px */