/* ==========================================================================
   RAIZ — Design Tokens
   Única fonte de verdade para cores, tipografia, espaçamento, motion, grid.
   Nenhum valor arbitrário fora daqui (exceto derivados com calc()).
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/assets/fonts/albertsans-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Fundos (paleta fixada pela marca) ---- */
  --claro: #eceeeb;
  --concreto: #d9dcd8;
  --crepusculo: #2b3b5c;
  --baia: #0c3446;
  --agua: #0f3f55;
  --anoitecer: #09283a;
  --noite: #061b25;
  --noite-funda: #04131a;
  --breu: #020c11;

  /* ---- Ação ---- */
  --vermelho: #d23f2a;
  --vermelho-hover: #b3311f;
  /* Tint legível (AA) para texto pequeno vermelho em fundo escuro */
  --vermelho-escuro-legivel: #e06046;
  /* Vermelho para texto pequeno sobre fundos claros (AA) */
  --vermelho-claro-legivel: #b3311f;

  /* ---- Tinta / texto ---- */
  --tinta: #0c3446;            /* headings sobre claro */
  --tinta-corpo: #2e3a42;      /* corpo sobre claro */
  --tinta-suave: #43525b;      /* secundário sobre claro (6.9:1 em --claro) */
  --papel: #eceeeb;            /* texto sobre escuro */
  --papel-suave: #a7b5ba;      /* secundário sobre escuro (AA em todos os fundos escuros) */

  /* ---- Linhas ---- */
  --linha-clara: rgba(236, 238, 235, 0.16);  /* hairline sobre escuro */
  --linha-clara-forte: rgba(236, 238, 235, 0.3);
  --linha-escura: rgba(12, 52, 70, 0.18);    /* hairline sobre claro */
  --linha-escura-forte: rgba(12, 52, 70, 0.4);

  /* ---- Tipografia ---- */
  --fonte-display: "Jost", "Albert Sans", system-ui, sans-serif;
  --fonte-corpo: "Albert Sans", "Jost", system-ui, sans-serif;

  --fs-base: 17px;
  --fs-micro: 0.875rem;        /* 14px */
  --fs-micro-2: 0.8125rem;     /* 13px */
  --fs-corpo: 1rem;            /* 17px com root 17 */
  --fs-lead: 1.1875rem;        /* 20px */
  --fs-h3: clamp(1.35rem, 1rem + 1.6vw, 1.8rem);
  --fs-h2: clamp(2.3rem, 1.4rem + 4vw, 4.6rem);
  --fs-h1: clamp(2.65rem, 10.4vw, 6.5rem);
  --fs-gigante: clamp(3.4rem, 7.5vw, 6.8rem);   /* preços / números */
  --fs-palavra: clamp(4.5rem, 14vw, 12rem);     /* wordmark / declarações */

  --trilha-display: -0.02em;
  --trilha-micro: 0.14em;

  --altura-linha-corpo: 1.65;
  --altura-linha-display: 0.98;

  /* ---- Espaçamento (escala fixada) ---- */
  --s-1: 0.5rem;   /* 8  */
  --s-2: 0.75rem;  /* 12 */
  --s-3: 1rem;     /* 16 */
  --s-4: 1.5rem;   /* 24 */
  --s-5: 2rem;     /* 32 */
  --s-6: 3rem;     /* 48 */
  --s-7: 4rem;     /* 64 */
  --s-8: 5.5rem;   /* 88 */
  --s-9: 7.5rem;   /* 120 */
  --s-10: 9rem;    /* 144 */

  /* ---- Grid / container ---- */
  --container: 1320px;
  --colunas: 12;
  --canal: 1.5rem;

  /* ---- Rail (trilho) ---- */
  --rail-w: 6px;
  --rail-w-m: 4px;
  --rail-esq: clamp(0.75rem, calc((100vw - var(--container)) / 2 - 3.5rem), 3rem);

  /* ---- Motion ---- */
  --t-rapido: 150ms;
  --t-medio: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- Raio ---- */
  --raio-pill: 999px;
  --raio-0: 0;

  /* ---- Z-index ---- */
  --z-conteudo: 1;
  --z-rail: 40;
  --z-header: 50;
  --z-sticky-cta: 60;
  --z-menu: 70;
  --z-skip: 100;

  /* ---- Touch ---- */
  --alvo: 44px;
  --btn-h: 56px;
  --fab: 60px;
}