/*
 * Flores das Águas — tokens de fundação (T4.1 + complemento).
 *
 * Cores e medidas: MEDIDAS nos screenshots aprovados (01-home-base-escolhida.png, largura nativa 1003 px),
 * adotadas por Tiago como base de implementação (não há paleta original). Evidência de cada valor:
 * docs/01-design/foundations/TIPOGRAFIA-E-TOKENS.md.
 * Famílias: decisão de implementação de Tiago (Cormorant Garamond + Inter), não identificadas nas referências.
 * Tamanhos: calibrados pela largura das mesmas frases na referência (mantém as quebras de linha), em px na
 * largura de 1003 px. Menu, rodapé e slogan foram ampliados por legibilidade (decisão de Tiago, 02/10/2026);
 * --fa-scale permanece 1 (não usar para ampliar o site inteiro).
 */

:root {
	/* Cores — medidas (mediana da tinta ou moda do preenchimento). */
	--fa-color-primary: #004ca0;          /* botões e faixa "Vamos conversar" */
	--fa-color-on-primary: #ffffff;
	--fa-color-heading: #0b369c;          /* H1/H2/H3 */
	--fa-color-link: #1541ad;             /* menu ativo, link de texto, cargo */
	--fa-color-text: #46609d;             /* texto corrido */
	--fa-color-text-muted: #5e74a5;       /* texto de cards */
	--fa-color-text-subtle: #6e8ec4;      /* rodapé */
	--fa-color-gold: #fbc66d;             /* filetes */
	--fa-color-gold-strong: #fbb03f;      /* ornamento de lótus */
	--fa-color-surface: #fefefe;          /* fundo da página */
	--fa-color-surface-soft: #f4f8fc;     /* card de apresentação */
	--fa-color-surface-alt: #f0f4fc;      /* card da Luiza */
	--fa-color-surface-blue: #e0f0fc;     /* faixa de aviso */
	--fa-color-border: #ddedfc;           /* borda de cards */

	/* Famílias (decisão de implementação). */
	--fa-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--fa-font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

	/* Escala — px calibrados em 1003 px (largura de tinta da frase de referência). */
	--fa-scale: 1;
	--fa-size-display: calc(42px * var(--fa-scale));    /* H1 da abertura "Um espaço de acolhimento" */
	--fa-size-h2: calc(33.5px * var(--fa-scale));       /* "Instituto Flores das Águas", "O que nos move" */
	--fa-size-h3: calc(27px * var(--fa-scale));         /* nomes das profissionais */
	--fa-size-h4: calc(18px * var(--fa-scale));         /* títulos de cards */
	--fa-size-lead: calc(17px * var(--fa-scale));       /* subtítulo da abertura */
	--fa-size-body: calc(15px * var(--fa-scale));       /* texto corrido */
	--fa-size-small: calc(13.5px * var(--fa-scale));    /* texto de cards */
	--fa-size-strong-small: calc(14px * var(--fa-scale)); /* cargo "Idealizadora • Fonoaudióloga" */
	--fa-size-eyebrow: calc(13.5px * var(--fa-scale));  /* "O INSTITUTO" */
	--fa-size-button: calc(12.5px * var(--fa-scale));   /* "Fale no WhatsApp", "Conheça o Instituto" */
	--fa-size-link: calc(12px * var(--fa-scale));       /* "Vamos conversar →" */
	--fa-size-nav: 14px;                  /* menu — legibilidade (decisão de Tiago); referência medida 10,5 px */
	--fa-size-brand-name: calc(16.5px * var(--fa-scale)); /* "INSTITUTO / FLORES DAS ÁGUAS" ao lado do símbolo */
	--fa-size-brand-tagline: 12px;        /* slogan — legibilidade (decisão de Tiago); referência 8,75 px */
	--fa-logo-size: calc(66px * var(--fa-scale));      /* símbolo no header (x 45–110, y 8–73) */
	--fa-leading-tight: 1.05;            /* títulos (entrelinha medida ~42 px no H1) */
	--fa-leading-body: 1.45;              /* entrelinha medida 21–22 px no texto corrido */
	--fa-leading-small: 1.4;              /* entrelinha medida ~18,5 px nos cards */

	/* Pesos — escolhidos pela cobertura de tinta comparada à referência. */
	--fa-weight-heading: 700;             /* mais próximo da referência (cobertura de tinta, T4.4); ainda um pouco mais leve */
	--fa-weight-body: 400;
	--fa-weight-nav: 500;
	--fa-weight-strong: 600;              /* botões, cargo, sobretítulo */

	/* Layout — medido em 1003 px. */
	--fa-container-max: 900px;            /* cards de valores x 53–952 */
	--fa-gutter: 16px;                    /* margem lateral em telas estreitas (convenção, não medida) */
	--fa-gap-card: 8px;                   /* espaço entre cards de valores */

	/* Cabeçalho e rodapé (T4.2) — medidos em 1003 px. */
	--fa-header-max: 920px;               /* logo em x 45 até o fim do botão em x 965 */
	--fa-nav-gap: 24px;                   /* espaço entre itens do menu (20–27 px medidos) */
	--fa-nav-item-gap: 14px;              /* entre itens com o menu em 14 px (para caber na largura de 1003 px) */
	--fa-nav-underline: 2px;              /* traço do item ativo (y 54) */
	--fa-button-height: 36px;             /* botão "Fale no WhatsApp" (y 18–54) */
	--fa-brand-gap: 11px;                 /* símbolo → nome (x 110 → 121) */
	--fa-logo-size-footer: calc(53px * var(--fa-scale));       /* símbolo do rodapé (x 42–94) */
	--fa-size-brand-name-footer: calc(15px * var(--fa-scale));
	--fa-size-brand-tagline-footer: 12px; /* slogan no rodapé — legibilidade; referência 8 px */
	--fa-size-footer-heading: 13px;       /* "NAVEGAÇÃO", "CONTATO" — legibilidade; referência 10 px */
	--fa-size-footer: 13px;               /* links do rodapé — legibilidade; referência 10 px */
	--fa-size-footer-contact: 13px;       /* e-mail, WhatsApp — legibilidade; referência 9,5 px */
	--fa-size-footer-meta: 13px;          /* observação e copyright — legibilidade; referência 9 px */
	--fa-color-divider: #c0dcf9;          /* divisor vertical do rodapé (x 560) */

	/* Componentes base (T4.3) — aproximados nas referências em 1003 px; refinar na comparação de páginas (T7/T8). */
	--fa-divider-line: 165px;             /* cada filete do divisor ("Pequenos detalhes…": x 320–485 e 525–680) */
	--fa-divider-gap: 40px;               /* espaço do ornamento de lótus entre os filetes */
	--fa-photo-size: 156px;               /* foto circular da profissional na Home (x 72–228) */
	--fa-badge-size: 108px;               /* selo do ícone dos cards (Home: halo ~110 px; Atendimentos: ~113 px na escala 1003) */
	--fa-badge-icon: 60px;                /* ícone dentro do selo (Home ~64 px; Atendimentos ~60 px) */
	--fa-contact-badge: 68px;             /* selo do canal de contato (06-contato, x 548–615) */
	--fa-color-panel: #ebf5fe;            /* fundo da caixa de canal de contato (06-contato) */
	--fa-color-badge-strong: #d6eafd;     /* selo do canal de contato: mais escuro que a caixa (06-contato) */
	--fa-size-channel-label: 20px;        /* "WhatsApp" no canal de contato (91 px de largura) */
	--fa-product-ratio: 10 / 7;           /* foto do card de produto (293 × 206) */
	--fa-product-focus: 50% 50%;          /* recorte da foto: centro (object-fit: cover, sem distorção) */
	/* Home — abertura e apresentação (T7.1; medidas em 01-home-base-escolhida.png, 1003 px) */
	--fa-hero-height: 288px;              /* faixa da aquarela: y 62–350 */
	--fa-hero-art: 316px;                 /* arte sol/onda/lua: x 548–864 */
	--fa-hero-pad-start: 56px;            /* texto em x 107 (contêiner de 900 px começa em 51) */
	--fa-hero-pad-end: 87px;              /* arte termina em x 864 */
	--fa-hero-divider: 383px;             /* divisor x 107–490 */
	--fa-leading-display: 0.96;           /* H1 em duas linhas: passo de 40 px (y 127–165, 167–205) */
	--fa-hero-button-width: 186px;        /* "Conheça o Instituto": x 106–291, y 268–303 */
	--fa-size-hero-button: 13px;
	--fa-size-hero-link: 12.5px;          /* "Vamos conversar →" */
	--fa-intro-width: 883px;              /* cartão x 60–943 */
	--fa-intro-height: 175px;             /* y 352–527 */
	--fa-intro-text: 440px;               /* coluna de texto (x 112–452) */
	--fa-intro-media: 453px;              /* foto x 490–943, esmaecida à esquerda */
	--fa-intro-fade: 110px;
	--fa-intro-focus: 50% 50%;            /* recorte da foto: centro (object-fit: cover) */
	--fa-radius-intro: 14px;
	--fa-color-intro-border: #e3f0fb;
	--fa-size-intro-text: 15.5px;
	/* Home — públicos, valores e profissionais (T7.2) */
	--fa-audience-height: 180px;          /* 04-atendimentos: 133 px a 765 px, levado ao contêiner de 900 px */
	--fa-audience-halo: 92px;
	--fa-audience-icon: 62px;             /* desenho em grade 24 com folga: 62 px ≈ 46 px de traço visível, como na referência */
	--fa-size-audience: 22px;             /* "Crianças" ~17 px a 765 px */
	--fa-color-animal: #ece9fa;           /* cartão Reiki para animais (fundo lilás medido: 238,238,248) */
	--fa-color-animal-border: #e3dcfb;
	--fa-color-animal-halo: #e2dcf8;
	--fa-value-height: 204px;             /* cards de valores: y 665–869 */
	--fa-value-halo: 110px;               /* D16: halo quase branco ~110 px */
	--fa-value-icon: 64px;                /* D16: ícone ~64 px (desenho visível ~54 px, y 682–736) */
	--fa-size-value-title: 19px;          /* "Respeito à / individualidade" em duas linhas (y 744–761) */
	--fa-size-value-text: 13px;           /* 3 linhas com passo de 18 px (y 780–829) */
	--fa-size-team-role: 13.5px;
	--fa-size-team-text: 13px;            /* legibilidade (piso de 13 px de Tiago); referência ~12,5 px em 5 linhas — aqui 6, cartão ~20 px mais alto */
	--fa-color-value-halo: #f1f7fd;       /* D16: elipse quase branca atrás do ícone (#f6fbfd medido no centro) */
	--fa-radius-value: 10px;
	--fa-team-max: 890px;                 /* cartões x 56–946 */
	--fa-team-card-height: 217px;         /* y 931–1148 */
	--fa-team-floral: 105px;              /* floral da Luiza: x 535–640 */
	--fa-team-button-width: 228px;        /* "Conheça as profissionais": x 390–618 */
	/* Home — projeto e chamada final (T7.3) */
	--fa-project-height: 104px;           /* cartão y 1176–1280 */
	--fa-project-media: 382px;            /* coluna da ilustração: texto começa em x 474 (cartão em x 58) */
	--fa-project-img: 262px;              /* ilustração x 178–440 */
	--fa-size-project-title: 28px;        /* "Projeto Xícaras de Conversa": y 1198–1220 */
	--fa-size-cta-title: 30px;            /* "Vamos conversar?": maiúscula de 20 px */
	--fa-cta-button-width: 170px;         /* "Falar no WhatsApp": x 487–655, 33 px */
	--fa-cta-max: 940px;                  /* conteúdo da faixa: título x 147 → contatos até x ≈ 940 */
	--fa-size-cta-lead: 13.5px;
	/* Profissionais (T8.1; 03-profissionais.png, 931 px) */
	--fa-pro-width: 845px;                /* cartão x 43–888 */
	--fa-pro-media: 394px;                /* coluna da foto: texto começa em x 437 */
	--fa-pro-photo: 265px;                /* foto com aro: x 127–392 */
	--fa-pro-floral: 340px;               /* floral da Luiza: x 60–400 (D13: arte em maior resolução pendente) */
	--fa-size-pro-name: 34px;             /* "Marta A da Sìlvèira" */
	--fa-size-pro-role: 19px;             /* "Idealizadora do Instituto" */
	--fa-size-pro-credential: 13.5px;     /* formações: "Pós-graduanda … — PUCRS" numa linha (x 474–852) */
	--fa-pro-button-width: 386px;         /* botão do cartão: x 439–824 */
	--fa-steps-max: 872px;                /* passos x 30–901 */
	--fa-size-step-title: 17px;
	/* Atendimentos (T8.2; 04-atendimentos-com-publicos.png, 765 px) */
	--fa-att-badge: clamp(76px, 11.3vw, 108px); /* D15: selo ~86 px em 765 px; ~113 px na escala de 1003 */
	--fa-att-height: 205px;               /* cartões y 767–980 / 990–1195 */
	--fa-size-att-title: 18px;
	--fa-att-button-width: 224px;         /* "Conversar com Marta": x 272–495 */
	/* Produtos e Contato (T8.3; 05-produtos.png 1003 px; 06-contato.png 1024 px) */
	--fa-hero-photo: 380px;               /* foto da abertura de Produtos: x ≈ 525–905 */
	--fa-size-hero-subtitle: 19px;        /* "Feitos à mão, com cuidado em cada detalhe." */
	--fa-highlight-width: 937px;          /* faixa de destaque x 33–970 */
	--fa-highlight-height: 210px;         /* y 872–1082 */
	--fa-size-highlight-title: 30px;      /* "Escolha com calma. / Converse com a gente." */
	--fa-contact-max: 940px;              /* painéis x 45–982 */
	--fa-catalog-max: 924px;              /* grade do catálogo: cards x 40–964 na referência (05-produtos.png) */
	--fa-catalog-card-max: 297px;         /* card de produto: 293–300 px na referência; com 1–2 itens não estica */
	--fa-size-catalog-note: 13px;         /* "Imagens ilustrativas…" — legibilidade; referência ~11 px */
	--fa-radius-panel: 12px;              /* caixas de contato e faixa de aviso */
	--fa-color-badge: #e8f2fd;            /* fundo do selo de ícone (entre surface-blue e surface-soft) */
	--fa-gap-grid: 16px;                  /* entre cards de produto (x 340→355) */
	--fa-size-product-title: 23px;        /* "Sabonetes artesanais": 189 px de largura em 1003 px (T4.4) */
	--fa-button-height-card: 40px;        /* botão do card de produto ("Consultar sabonetes": 217 × 39 px) */
	--fa-size-button-card: 13px;          /* texto do botão do card de produto (131 px de largura) */
	--fa-size-notice: 12.5px;             /* aviso em uma linha: frase com 747 px de largura em 1003 px (T4.4) */

	/* Borda, raio e sombra — medidos nos cards. */
	--fa-border-width: 1px;
	--fa-radius-card: 8px;
	--fa-radius-pill: 999px;              /* botões */
	--fa-shadow-card: none;               /* nenhuma sombra visível nos cards */
}