/* tokens.css — cor, tipografia, espaço, forma, elevação e movimento.

   É o primeiro CSS a carregar e a única fonte desses valores. Hex, medida de
   espaçamento e duração não devem aparecer em nenhum outro arquivo: quem
   precisa de uma cor pede um token.

   Toda cor aparece duas vezes, hex primeiro e oklch depois. Não é engano nem
   sobra: navegador sem suporte a oklch descarta a segunda linha e fica com o
   hex, e os demais usam oklch, que mantém o dourado da marca coerente ao ser
   clareado ou escurecido. Apagar o hex tira a cor dos navegadores antigos. */

:root {
  /* ---------- Cor — primitivas da marca ---------- */

  /* Navy: base institucional. Autoridade, seriedade, contraste. */
  --fp-navy-deep: #061329;
  --fp-navy-deep: oklch(19% 0.048 258);
  --fp-navy: #0e1f39;
  --fp-navy: oklch(24% 0.055 258);
  --fp-navy-soft: #22334c;
  --fp-navy-soft: oklch(32% 0.05 258);

  /* Dourado: o acento da marca, e só isso. Vale como realce, nunca como
     superfície — dourado em área grande vira ouro de fantasia.
     `--fp-gold-deep` é o tom exato do logotipo. */
  --fp-gold-deep: #a97d3a;
  --fp-gold-deep: oklch(62% 0.1 76);
  --fp-gold: #d0ab66;
  --fp-gold: oklch(76% 0.098 82);
  --fp-gold-soft: #e3cfa5;
  --fp-gold-soft: oklch(86% 0.06 85);

  /* Neutros de papel: levemente quentes, para conversar com o dourado. */
  --fp-paper: #fdfcf9;
  --fp-paper: oklch(99% 0.004 90);
  --fp-sand: #f4f1ec;
  --fp-sand: oklch(96% 0.008 85);
  --fp-line: #e2ded5;
  --fp-line: oklch(90% 0.012 85);
  --fp-ink: #0e1b2d;
  --fp-ink: oklch(22% 0.04 258);
  --fp-ink-muted: #58616f;
  --fp-ink-muted: oklch(49% 0.025 258);
  --fp-on-navy: #f7f5ef;
  --fp-on-navy: oklch(97% 0.008 90);
  --fp-on-navy-muted: #b9bcc4;
  --fp-on-navy-muted: oklch(78% 0.012 258);

  /* WhatsApp em verde profundo, não no verde vivo do aplicativo. O #25D366
     original grita ao lado do navy e do dourado e derruba o tom do site
     inteiro; este mantém a associação ao canal sem disputar com a marca.

     Fica reservado à conversão. Usá-lo em outra ação faz o verde deixar de
     significar "aqui você fala com alguém". */
  --fp-wa: #2f6b46;
  --fp-wa-dark: #245437;
  --fp-wa-light: #7fbb98;   /* sobre navy, onde o verde escuro sumiria */

  /* Estado. Reservados para o formulário de contato e o assistente. */
  --fp-danger: #a4392f;
  --fp-danger: oklch(48% 0.14 27);
  --fp-success: #2f6b46;
  --fp-success: oklch(52% 0.09 155);

  /* ---------- Cor — papéis ----------
     Os componentes consomem só daqui para baixo. As primitivas acima dizem
     que cores existem; estes dizem para que servem. Trocar um papel reveste
     o site inteiro sem mexer em nenhuma cor. */
  --fp-surface: var(--fp-paper);
  --fp-surface-alt: var(--fp-sand);
  --fp-surface-inverse: var(--fp-navy);
  --fp-text: var(--fp-ink);
  --fp-text-muted: var(--fp-ink-muted);
  --fp-text-inverse: var(--fp-on-navy);
  --fp-accent: var(--fp-gold-deep);      /* acento sobre fundo claro: ícones,
                                            numerais, filetes, bordas, foco */
  --fp-accent-on-dark: var(--fp-gold);   /* acento sobre navy */

  /* Um segundo dourado, só para texto pequeno sobre fundo claro.
     `--fp-accent` rende 3,6:1: passa em título grande e em elemento gráfico,
     mas reprova nos 4,5:1 que a WCAG pede para corpo pequeno. Este chega a
     4,98:1 no papel e 4,54:1 na areia. Nos 12 a 15px de um eyebrow ninguém
     percebe a diferença de tom; a de legibilidade se percebe.
     Vai em eyebrow, rótulo, "saiba mais" e botão de texto. */
  --fp-accent-text: #90661f;
  --fp-accent-text: oklch(54% 0.1 76);
  --fp-border: var(--fp-line);
  --fp-border-inverse: color-mix(in oklab, var(--fp-on-navy) 16%, transparent);

  /* Borda de campo de formulário, separada de `--fp-border` porque a WCAG
     trata as duas de formas diferentes. Filete de card é decoração e não tem
     exigência; a borda de um <input> é o que mostra onde se pode escrever, e
     precisa de 3:1 (SC 1.4.11, Non-text Contrast). O filete comum rende
     1,31:1 e praticamente sumia contra o papel; este dá 3,15:1. */
  --fp-border-field: #938f85;
  --fp-border-field: oklch(65% 0.015 85);
  --fp-focus: var(--fp-gold-deep);

  /* Gradientes da marca. Para filete, moldura e faixa estreita — em área
     grande o degradê chama mais atenção que o conteúdo. */
  --fp-gradient-gold: linear-gradient(
    100deg,
    var(--fp-gold-deep),
    var(--fp-gold) 45%,
    var(--fp-gold-soft)
  );
  --fp-gradient-navy: linear-gradient(
    150deg,
    var(--fp-navy-deep),
    var(--fp-navy) 55%,
    var(--fp-navy-soft)
  );

  /* ---------- Tipografia ----------
     Montserrat é a única família do site. A hierarquia vem do peso, não da
     troca de fonte: 800 em título, botão e rótulo; 400 e 500 no texto.

     Os dois tokens abaixo apontam para a mesma família de propósito. Ficam
     separados para o dia em que os títulos ganharem fonte própria — nesse
     dia, muda-se uma linha em vez de varrer o CSS. */
  --fp-font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --fp-font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --fp-weight-regular: 400;
  --fp-weight-medium: 500;
  --fp-weight-semibold: 600;
  --fp-weight-extrabold: 800;   /* títulos, botões, rótulos */

  /* O peso de todos os títulos passa por aqui */
  --fp-weight-display: var(--fp-weight-extrabold);

  /* Escala fluida, interpolando entre 360px e 1440px de tela. Assim o mobile
     recebe tamanhos pensados para ele, e não um desktop espremido — e não é
     preciso media query nenhuma para tipografia.

     Os números foram calibrados para Montserrat, cuja altura-x é bem maior
     que a de uma serifada: no mesmo valor em px ela ocupa cerca de 20% mais
     espaço óptico. Por isso os títulos parecem pequenos na conta e chegam ao
     peso certo na tela. Trocar a fonte obriga a recalibrar isto.

     Em px, do mínimo ao máximo:
       xl 19→21 · 2xl 22→27 · 3xl 26→34 · 4xl 30→42 · 5xl 36→56 */
  --fp-text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --fp-text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
  --fp-text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fp-text-lg: clamp(1.0625rem, 1.021rem + 0.19vw, 1.1875rem);
  --fp-text-xl: clamp(1.1875rem, 1.146rem + 0.19vw, 1.3125rem);
  --fp-text-2xl: clamp(1.375rem, 1.271rem + 0.46vw, 1.6875rem);
  --fp-text-3xl: clamp(1.625rem, 1.458rem + 0.74vw, 2.125rem);
  --fp-text-4xl: clamp(1.875rem, 1.625rem + 1.11vw, 2.625rem);
  --fp-text-5xl: clamp(2.25rem, 1.833rem + 1.85vw, 3.5rem);

  /* Montserrat 800 é larga e alta, e pede entrelinha mais fechada que uma
     serifada — no valor de sempre o título fica solto no meio do espaço. */
  --fp-leading-tight: 1.06;
  --fp-leading-normal: 1.5;
  --fp-leading-relaxed: 1.7;   /* corpo de texto longo */

  /* Em corpo grande o peso 800 já fecha o espaço entre as letras sozinho; o
     valor negativo acompanha esse fechamento para o título não parecer
     espalhado pela linha. */
  --fp-tracking-tight: -0.035em;
  --fp-tracking-wide: 0.06em;
  --fp-tracking-widest: 0.16em; /* eyebrows e rótulos em caixa alta */

  /* Largura máxima de uma linha de texto corrido. Linha longa demais faz o
     olho perder o começo da seguinte. */
  --fp-measure: 68ch;

  /* ---------- Espaço ----------
     Escala de razão ~1,5 ancorada em 4px. Ter poucos degraus é o que mantém
     o ritmo do site: espaçamento fora da escala destoa na hora. */
  --fp-space-3xs: 0.25rem;
  --fp-space-2xs: 0.5rem;
  --fp-space-xs: 0.75rem;
  --fp-space-sm: 1rem;
  --fp-space-md: 1.5rem;
  --fp-space-lg: 2rem;
  --fp-space-xl: 3rem;
  --fp-space-2xl: 4rem;

  /* O respiro entre seções, que encolhe sozinho no mobile */
  --fp-section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7.5rem);

  /* ---------- Layout ---------- */
  --fp-container: 78rem;        /* 1248px — largura máxima do conteúdo */
  --fp-container-narrow: 46rem; /* páginas de texto: política, artigos */
  --fp-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --fp-header-h: 4.5rem;
  --fp-header-h-scrolled: 3.75rem;

  /* ---------- Forma ---------- */
  --fp-radius-sm: 0.25rem;
  --fp-radius: 0.5rem;
  --fp-radius-lg: 0.875rem;
  --fp-radius-pill: 999px;
  --fp-hairline: 1px;

  /* ---------- Elevação ----------
     Sombras tingidas de navy, nunca de cinza neutro: sombra cinza sobre papel
     quente parece sujeira, e não profundidade. */
  --fp-shadow-soft: 0 18px 40px -28px color-mix(in oklab, var(--fp-navy-deep) 60%, transparent);
  --fp-shadow-lift: 0 26px 60px -30px color-mix(in oklab, var(--fp-navy-deep) 70%, transparent);
  --fp-shadow-gold: 0 18px 44px -26px color-mix(in oklab, var(--fp-gold-deep) 55%, transparent);

  /* ---------- Movimento ----------
     Uma curva só, que parte rápido e assenta devagar. */
  --fp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fp-duration-fast: 160ms;
  --fp-duration: 280ms;
  --fp-duration-slow: 520ms;

  /* A cascata, que revela os blocos conforme se rola. Tem duração própria
     porque é uma entrada, não a resposta a um clique: ninguém está esperando
     por ela, então pode demorar mais sem parecer lenta. */
  --fp-reveal-duration: 750ms;
  --fp-reveal-distance: 2.25rem;
  --fp-reveal-step: 120ms;      /* intervalo entre irmãos na cascata */

  /* ---------- Camadas ----------
     Todo z-index do site está aqui, em ordem de empilhamento. Número solto
     espalhado pelo CSS é como começam as guerras de z-index: 999, 9999. */
  --fp-z-header: 200;
  --fp-z-whatsapp: 300;
  --fp-z-drawer: 400;
  --fp-z-skiplink: 600;
}

/* Quem pediu menos movimento no sistema operacional recebe o site parado.
   As durações são zeradas aqui, na origem: nenhum componente precisa saber
   que essa preferência existe, e nenhum pode esquecer de respeitá-la.

   Não vai a zero cravado — 0,01ms mantém o evento `transitionend` disparando,
   que algum navegador deixa de emitir com duração exatamente zero. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fp-duration-fast: 0.01ms;
    --fp-duration: 0.01ms;
    --fp-duration-slow: 0.01ms;
    --fp-reveal-duration: 0.01ms;
    --fp-reveal-distance: 0;
    --fp-reveal-step: 0ms;
  }
}