/*
 * Fontinha — design tokens.
 * Gerado a partir de design-tokens.md (Figma "FONTINHA [WEBSITE] TESTE RV").
 * NÃO alterar valores sem passar primeiro pelo design-tokens.md.
 *
 * Duas camadas:
 *   1. Paleta bruta (--c-*)      — o que foi lido do Figma. Não usar diretamente nas secções.
 *   2. Camada semântica (--s-*)  — é ESTA que o CSS das secções usa.
 */

:root {
	/* ==========================================================
	   1. PALETA BRUTA
	   ========================================================== */

	/* ---------- Marca ---------- */
	--c-petrol: #005470;
	--c-petrol-hover: #00405a;
	--c-petrol-mid: #4e8599;
	--c-petrol-soft: #b2c8d1;
	--c-petrol-pale: #c5d4d8;
	/* Amostrado na banda das FAQs: o título gigante e a arte de linha do canto
	   são os dois #80A5B4 (nós 4001:964 e 4001:965). Fica entre o -mid e o
	   -soft e não existia na paleta. */
	--c-petrol-tint: #80a5b4;

	/* ---------- Neutros ---------- */
	--c-ink: #3c3c3b;          /* texto e fundo do header: #3D3D3C foi unificado aqui */
	/* Serve a barra do footer e os CTAs do header. Chamava-se --c-footer-bg
	   enquanto só tinha um uso. */
	--c-grey: #686969;
	/* Derivado, não lido do Figma: #686969 escurecido pelo mesmo fator que
	   leva #005470 a #00405A (×0.78). O Figma não define estados de hover. */
	--c-grey-hover: #515252;
	--c-muted: #aaaaaa;
	/* Amostrados no frame: a parede texturada por trás dos destaques e a moldura
	   preta dos cartões. Nenhum deles existia na paleta. */
	--c-wall: #8f6c44;
	--c-frame: #262626;
	/* Lido no nó 4004:2710 — o texto do hero da Sobre Nós. */
	--c-brown: #6a5130;
	--c-line: #e0e1e2;
	--c-white: #ffffff;
	--c-black: #000000;

	/* ---------- Superfícies ---------- */
	--c-bg: #fffbf8;
	--c-surface: #fdf1e7;
	/* O castanho da Pizzeria: texto da história e fundo da banda da galeria, nós
	   4005:19928 e 4005:19999. Não é o --c-brown (#6a5130), que é 28 pontos mais
	   escuro no vermelho — num bloco de texto inteiro vê-se. */
	--c-terracota: #865926;
	--c-sand: #fdecdc;
	--c-sand-2: #faead6;
	--c-paper: #fff8f0;
	--c-paper-2: #fff6f4;

	/* ---------- Texto sobre escuro ---------- */
	--c-cream: #f6e8c9;
	--c-cream-text: #fde2bd;
	--c-taupe: #605c55;
	--c-taupe-light: #af9b7b;

	/* ---------- Beges ---------- */
	--c-beige: #e3d3c9;
	/* O creme acinzentado da banda do calendário da Pizzeria. Não é nenhum dos
	   outros: o --c-sand (#fdecdc) é o do pergaminho que assenta em cima dele, e
	   o --c-beige é 12 pontos por canal mais escuro. Autorizado pelo Ricardo. */
	--c-linho: #efdfd1;
	/* A banda do cabeçalho da página Eventos: nós 4005:35066 e 4005:35248,
	   #F4E9DF chapado, 330px de altura nos dois frames. O mais próximo da
	   paleta era o --c-sand (#FDECDC), a 15 pontos somados — nove deles no
	   vermelho, o que numa banda desta área se vê. */
	--c-greige: #f4e9df;
	/* O painel dos cartões de NOTÍCIA no mosaico dos Eventos, amostrado nos
	   três: #EAE3DC. O par dele, o painel de EVENTO, é o --c-petrol-soft que
	   a paleta já tinha. O mais próximo era o --c-line (#E0E1E2), a 18 pontos
	   e visivelmente mais frio ao lado do azul. */
	--c-argila: #eae3dc;
	/* O bloco da morada na banda de localização da Contactos: nós 4005:37227 e
	   4005:38801, #C9C0BC nos dois frames. Cinzento-quente que a paleta não
	   tinha — o mais próximo estava a 52 pontos e era azul. */
	--c-pedra: #c9c0bc;
	/* A resposta da FAQ da Contactos: nó 4005:38708, #AC8B66. É a única cor
	   deste tom na paleta. **Dá 3.07:1 sobre a caixa branca, e a resposta tem
	   12.658px** — abaixo dos 4.5:1 que texto normal pede. Ficou com o valor do
	   desenho por decisão do Ricardo, como o rótulo da barra de reservas; está
	   na lista da designer. */
	--c-areia-escura: #ac8b66;
	--c-beige-2: #ddcda8;      /* #E0CEA9 foi unificado aqui: diferença invisível */

	/* ---------- Acentos ---------- */
	--c-sage: #8fb5a7;
	--c-red: #a93143;
	--c-red-deep: #b21f24;
	--c-wine: #753c44;

	/* ---------- Gradiente dourado (identidade) ---------- */
	--g-gold: linear-gradient(90deg, #a26851 0%, #b67f62 25%, #d7a67e 50%, #ebbf90 75%, #f3c897 100%);

	/* ==========================================================
	   2. CAMADA SEMÂNTICA — usar SEMPRE estas nas secções
	   ========================================================== */

	--s-text: var(--c-ink);
	--s-text-muted: var(--c-taupe);
	--s-text-on-dark: var(--c-cream-text);
	/* Branco neutro, para texto por cima de fotografia ou da barra de reservas.
	   O --s-text-on-dark é creme e o Figma usa branco puro aqui. */
	--s-text-on-media: var(--c-white);
	/* O papel #FFF8F0. Chamava-se --s-text-on-petrol, mas serve qualquer fundo
	   escuro: a banda dos reviews é cinzenta e usa-o na mesma. */
	--s-text-paper: var(--c-paper);
	/* Texto esbatido sobre petrol: o título das FAQs e a arte de linha da
	   mesma banda. Dá 3.18:1 sobre o --s-bg-petrol, o que chega para texto
	   grande — lá o título tem 121.9px. Não serve para texto corrido. */
	--s-text-faint: var(--c-petrol-tint);
	/* Petrol como TEXTO: títulos de página e rótulos em petrol sobre fundo
	   claro. Existe porque até aqui a única via era o --s-bg-petrol, que é um
	   token de FUNDO — usá-lo em `color` era pedir uma cor de fundo para
	   pintar letra, e o socials.css já tinha feito o mesmo com o
	   `border-color`. Dá 6.92:1 sobre o creme da Galeria (#F6E8C9) e 8.16:1
	   sobre o fundo base (#FFFBF8): cumpre para texto corrido. */
	--s-text-petrol: var(--c-petrol);
	/* Os títulos e os subtítulos de secção da Política de Privacidade: nós
	   4005:39605 e 4005:39618, `#4E8599`. É o --c-petrol-mid, que já servia de
	   fundo na galeria da Sobre Nós. **Dá 3.6:1 sobre o creme da página** — só
	   serve títulos, e é só para isso que o desenho o usa. */
	--s-text-petrol-mid: var(--c-petrol-mid);
	/* O corpo e a lista do Aviso legal, sobre o fundo escuro: `#EAE3DC`, o
	   --c-argila. Dá 9.4:1 sobre o --s-bg-dark. O desenho distingue-o da linha
	   de realce, que é o --s-text-on-dark (#FDE2BD) — são dois tons e não um. */
	--s-text-argila: var(--c-argila);

	/* Texto corrido do hero da página Sobre Nós: castanho sobre o creme com o
	   padrão de losangos. Lido no nó 4004:2710 (Gill Sans Light 14.285px). Não
	   existia na paleta — o --c-taupe é cinzento e o --c-taupe-light é claro
	   de mais. Dá 6.02:1 sobre o --s-bg-cream. */
	--s-text-brown: var(--c-brown);
	/* Texto da Pizzeria sobre os cremes. Dá 5.26:1 sobre o --s-bg-sand. */
	--s-text-terracota: var(--c-terracota);

	--s-bg: var(--c-bg);
	--s-bg-alt: var(--c-surface);
	--s-bg-sand: var(--c-sand);
	/* O creme da banda da Offers: amostrado #FEE2BD nos dois quadrantes claros.
	   É o --c-cream-text, que até aqui só servia de cor de TEXTO sobre fundos
	   escuros; aqui é fundo, e por isso precisava de nome próprio. */
	--s-bg-cream-text: var(--c-cream-text);
	/* A banda do hero da Sobre Nós: nó 4004:2620, #F7E9CA, que é o --c-cream
	   a menos de um ponto em cada canal. */
	--s-bg-cream: var(--c-cream);
	/* A banda da galeria da Sobre Nós: nó 4004:2632, #4E8599. É o
	   --c-petrol-mid, que a paleta já tinha mas nunca tinha sido usado. */
	--s-bg-petrol-mid: var(--c-petrol-mid);
	/* A banda do Instagram: #DDCDA8, que já era o --c-beige-2. */
	--s-bg-beige: var(--c-beige-2);
	--s-bg-linho: var(--c-linho);
	/* A banda do cabeçalho dos Eventos. */
	--s-bg-greige: var(--c-greige);
	/* O painel do cartão de notícia no mosaico dos Eventos. O de evento
	   usa o --s-bg-petrol-soft, aqui em baixo. */
	--s-bg-argila: var(--c-argila);
	/* Texto sobre o petrol da banda de localização da Contactos. Dá 8.0:1 — ao
	   contrário do --s-text-faint, serve texto corrido. */
	--s-text-pedra: var(--c-pedra);
	/* A resposta da FAQ da Contactos. Ver o aviso de contraste no --c-areia-escura. */
	--s-text-areia: var(--c-areia-escura);
	/* A faixa por trás das miniaturas no pop-up de detalhe do quarto: nó
	   4005:8693, #B2C8D1. É o --c-petrol-soft, que a paleta já tinha e nunca
	   tinha sido usado. */
	--s-bg-petrol-soft: var(--c-petrol-soft);
	/* A calha da barra de progresso da Offers: nó 4005:38967, amostrado
	   #C5D4D8. É o --c-petrol-pale, que a paleta já tinha e nunca tinha sido
	   usado — como aconteceu ao --c-petrol-mid e ao --c-petrol-soft. */
	--s-bg-petrol-pale: var(--c-petrol-pale);
	--s-bg-dark: var(--c-ink);
	/* A costura preta entre o hero dos Quartos e a banda do carrossel: nó
	   4004:7426, `fill="black"`, 19.75px visíveis. O --s-bg-dark é #3C3C3B e
	   é a cor da própria banda que vem a seguir — não servia para o traço
	   que a separa da fotografia. */
	--s-bg-black: var(--c-black);
	--s-bg-petrol: var(--c-petrol);
	--s-bg-footer: var(--c-grey);
	--s-bg-wall: var(--c-wall);
	--s-frame: var(--c-frame);

	--s-line: var(--c-line);
	/* Régua sobre fundo escuro. A das FAQs é #FFFBF8 a 0.8px — o --c-line é
	   cinzento claro e desaparecia sobre o petrol. */
	--s-line-on-dark: var(--c-bg);
	/* A calha da barra de progresso dos Quartos, sobre a banda petrol: nó
	   4004:7480, amostrado a #E2D2C8, que é o --c-beige a menos de um ponto
	   por canal. O --s-line-on-dark é branco-creme e lia-se como um segundo
	   cursor; o --s-line é cinzento e arrefecia a banda. */
	--s-line-on-petrol: var(--c-beige);
	--s-link: var(--c-petrol);
	--s-link-hover: var(--c-petrol-hover);

	/* Botão primário — corpo do site, sobre fundos claros. */
	--s-btn-bg: var(--c-petrol);
	--s-btn-bg-hover: var(--c-petrol-hover);
	--s-btn-text: var(--c-cream);

	/* Botão alternativo — CTAs do header, sobre a barra escura. */
	--s-btn-alt-bg: var(--c-grey);
	--s-btn-alt-bg-hover: var(--c-grey-hover);
	--s-btn-alt-text: var(--c-cream-text);

	/* ==========================================================
	   3. TIPOGRAFIA
	   ========================================================== */

	/* Ver assets/css/fonts.css para os nomes dos ficheiros .woff2. */
	--font-display: "Baro", system-ui, sans-serif;
	--font-body: "Gill Sans", system-ui, sans-serif;

	/* Fonte dos títulos (H1/H2). É a Baro LineTwo, o estilo com linhas
	   interiores — confirmado por comparação ampliada com o frame exportado:
	   as letras dos títulos dos cartões são ocas, com traço interior.
	   O "peso 200" do design-tokens.md é o índice deste estilo, não um peso.
	   O H3 fica na Plain — ver base.css. */
	--font-title: "Baro Line", "Baro", system-ui, sans-serif;

	/* A Baro que temos licenciada é a Plain, de peso 500.
	   O "200" lido no Dev Mode era o índice do estilo LineTwo, não um peso. */
	--fw-display: 500;
	--fw-display-strong: 500;
	--fw-body: 300;
	--fw-body-strong: 500;

	/* Mobile first: estes valores são os de mobile e sobem no breakpoint desktop. */
	--fs-h1: 34px;
	--fs-h2: 28px;
	--fs-h3: 20px;
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-xsmall: 12px;
	--fs-nav: 16px;
	--fs-btn: 12px;

	/* Os CTAs do header têm corpo próprio, mais pequeno que o botão primário.
	   Lido no Dev Mode do nó 4001:796: Baro Plain 10.755px, sem letter-spacing.
	   Os 12px do --fs-btn vêm do botão "details", que é o primário. */
	/* Mobile-first: 7.511px é o do Header - Mobile (nó 4002:1121). Os 10.755
	   do desktop entram aos 1440, com o resto da barra. */
	--fs-btn-header: 7.511px;

	/* Só há um token de entrelinha. Todos os nós de texto do ficheiro usam
	   `leading-normal` — H1 (4005:26293), títulos de cartão (4001:1090), H2
	   mobile (4002:180), corpo (4001:879), CTAs (4001:796), menu (4002:89) e o
	   frame mobile inteiro. A única excepção é o rótulo do botão primário
	   (4001:1093), que tem `leading-none`. Os 1.1 / 1.15 / 1.25 / 1.6 / 1.5 da
	   tabela "Escala proposta" eram estimativas e estavam todos errados. */
	--lh-tight: 1;   /* só o rótulo do botão primário */

	/* Não há tokens de letter-spacing. O 0.04em em H1/H2 e o 0.08em em menu e
	   botões vinham da tabela "Escala proposta" do design-tokens.md e estavam
	   errados: nenhum nó de texto do ficheiro tem tracking. Verificado no H1
	   (4005:26293), nos títulos dos cartões (4001:1090), nos CTAs do header
	   (4001:796), no menu (4002:89) e no frame mobile inteiro. */

	/* ==========================================================
	   4. ESPAÇAMENTOS
	   ========================================================== */

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-4: 16px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-24: 96px;
	--sp-32: 128px;

	--section-y: var(--sp-12);   /* padding vertical de secção — mobile */
	--card-gap: var(--sp-4);

	/* Não há --section-gap. As bandas do desenho não têm intervalo entre si:
	   encostam ou sobrepõem-se. Ver "Sobreposições entre bandas" no CLAUDE.md. */

	/* ==========================================================
	   5. LAYOUT
	   ========================================================== */

	/* Medidos na grelha da Galeria (nós 4005:26360 e seguintes, doze imagens de
	   240.2x322.4): a grelha vai de x=108.9 a 1332.3, o que dá 1223.4 de largura
	   e margens de 108.9 à esquerda e 107.7 à direita. Os 1240/100 anteriores
	   eram derivados à mão a partir de 1440-1240. */
	--container: 1223.4px;
	--container-text: 885px;   /* confirmado no nó 4005:26297 */
	--gutter: 20px;            /* mobile: o desenho não tem valor único — 28.2,
	                              36.2, 43.8, 44.2 e 52.3 em nós diferentes */
	--bar-gutter: 26px;          /* padding lateral do header e do footer */
	/* 54px medidos no componente "Header - Mobile" (nó 4004:5883). Os 64px que
	   aqui estavam eram proposta. */
	--header-h: 54px;            /* até 1439: logótipo + hamburger */
	--header-cta-w: 108.136px;   /* mobile, nó 4002:1120; 154 aos 1440 */
	--header-cta-h: 16.587px;    /* mobile; 28 aos 1440 */

	/* Breakpoint geral do projeto: 1200px — e 1440px só para o header.
	   Os valores estão repetidos nas media queries porque o CSS não permite
	   variáveis em @media. Se mudarem, mudam em tokens.css, base.css e main.css. */

	/* ==========================================================
	   6. FORMAS E MOVIMENTO
	   ========================================================== */

	--r-btn: 0;
	--r-card: 0;
	--shadow-card: none;

	--t-fast: 150ms ease;
	--t-media: 400ms ease;       /* zoom-out das imagens no hover */
}

@media (min-width: 1200px) {
	:root {
		--fs-h1: 56px;
		--fs-h2: 40px;
		--fs-h3: 24px;
		--fs-nav: 14px;

		--section-y: var(--sp-24);
		--card-gap: var(--sp-6);

		--gutter: 108.9px;
	}
}

/*
 * O header não segue o breakpoint geral: segue o menu.
 * Só aos 1440 é que o menu horizontal e os CTAs entram na barra, e é aí que
 * ela precisa dos 95px do Figma. Entre 1200 e 1439 o conteúdo da barra é o
 * mobile — logótipo e hamburger — e a altura acompanha-o.
 * Ver CLAUDE.md, secção Breakpoints.
 */
@media (min-width: 1440px) {
	:root {
		--header-h: 95px;
		--header-cta-w: 154px;
		--header-cta-h: 28px;
		--fs-btn-header: 10.755px;
	}
}