/* ══════════════════════════════════════════════════════════════
   PANTANAL SAÚDE · v2 — Tokens
   Fonte da verdade: manual da marca (hekbay.com/pantanal)

   Regras do manual aplicadas aqui, sem exceção:
   · 5 cores de sistema. Nenhuma cor nova. Derivadas = só opacidade.
   · Duas faces: Sora 700 (título e número) + Inter 400 corrido / 500 legenda.
   · Escala fixa. Nenhum tamanho intermediário fora da série.
   · Sem sombra, sem brilho, sem efeito decorativo. Estrutura = fio de 1px.
   · Alinhamento à esquerda. Centralizado só em capa.
════════════════════════════════════════════════════════════════ */

/* ─── Faces ─── */
@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/Sora-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ══ Cor · sistema oficial ══════════════════════════════════ */
  --navy: #0c2b52;    /* Azul Principal  · dominante, tipografia, fundos */
  --blue: #0a4681;    /* Azul Destaque   · link, ênfase, frente Planos   */
  --teal: #1b8b73;    /* Verde NR-1      · frente de saúde ocupacional   */
  --amber: #f2c52f;   /* Amarelo Plantão · urgência, canal 24h, ação     */
  --paper: #f7f4ef;   /* Off-white       · fundo principal, respiro      */
  --white: #ffffff;

  /* Derivadas — apenas opacidade do Azul Principal sobre off-white.
     rgb(12 43 82) = --navy. Nenhum matiz inventado. */
  --ink: var(--navy);
  --ink-76: rgb(12 43 82 / 0.76);   /* corrido secundário · 6.3:1  */
  --ink-66: rgb(12 43 82 / 0.66);   /* legenda e meta   · 4.6:1 AA */
  --ink-54: rgb(12 43 82 / 0.54);   /* só traço e ícone, não texto */
  --ink-34: rgb(12 43 82 / 0.34);   /* placeholder e desativado    */
  --rule: rgb(12 43 82 / 0.14);     /* fio estrutural           */
  --rule-soft: rgb(12 43 82 / 0.08);
  --field: rgb(12 43 82 / 0.045);   /* campo de fundo sutil     */
  --field-2: rgb(12 43 82 / 0.075);

  /* Sobre Azul Principal (bandas escuras) */
  --paper-84: rgb(247 244 239 / 0.84);
  --paper-58: rgb(247 244 239 / 0.58);
  --paper-38: rgb(247 244 239 / 0.38);
  --rule-dark: rgb(247 244 239 / 0.20);
  --rule-dark-soft: rgb(247 244 239 / 0.11);
  --field-dark: rgb(247 244 239 / 0.06);

  /* Acento por página — cada frente carrega sua cor de produto */
  --accent: var(--blue);
  --accent-ink: var(--white);       /* texto legível sobre --accent */

  /* ══ Tipografia ═════════════════════════════════════════════
     Série do manual: 12 · 15 · 18 · 24 · 32 · 48
     Extensão web pela mesma razão 4:3 (48 → 64 → 85), usada só em capa.
     Todo clamp interpola entre dois degraus da própria série.        */
  --face-display: "Sora", "Sora Fallback", system-ui, sans-serif;
  --face-text: "Inter", "Inter Fallback", system-ui, sans-serif;

  --t-cover: clamp(2rem, 1.05rem + 4.4vw, 4rem);      /* 32 → 64 · capa   */
  --t-display: clamp(1.5rem, 1.06rem + 2.05vw, 3rem); /* 24 → 48 · seção  */
  --t-h1: clamp(1.375rem, 1.15rem + 1.03vw, 2rem);    /* 22 → 32 · bloco  */
  --t-h2: clamp(1.125rem, 1.02rem + 0.47vw, 1.5rem);  /* 18 → 24 · item   */
  --t-body-l: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);/* 16 → 18 · lead   */
  --t-body: 0.9375rem;                                /* 15 · corrido     */
  --t-caption: 0.75rem;                               /* 12 · legenda     */

  --lh-cover: 1.02;
  --lh-display: 1.06;
  --lh-head: 1.16;
  --lh-text: 1.62;
  --lh-tight: 1.36;

  --track-cover: -0.028em;
  --track-display: -0.02em;
  --track-head: -0.012em;
  --track-caption: 0.07em;

  /* Números tabulares nas tabelas e nos dados */
  --num-tabular: "tnum" 1, "lnum" 1;

  /* ══ Espaço · múltiplos de 4 ════════════════════════════════ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;

  /* ══ Estrutura ══════════════════════════════════════════════ */
  --shell: 76rem;                                   /* 1216px de conteúdo */
  --pad-x: clamp(1.25rem, 0.55rem + 3.2vw, 3rem);   /*  20 → 48px         */
  --band-y: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);   /*  36 → 64px         */
  --nav-h: 4.25rem;

  /* Raio — o manual pede geometria sóbria: quina viva na estrutura,
     pílula só em controle de ação. */
  --r-0: 0;
  --r-1: 2px;
  --r-pill: 999px;

  /* ══ Movimento ══════════════════════════════════════════════ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-mid: 260ms;
  --t-slow: 620ms;

  color-scheme: light;
}

/* Acento por produto — declarado no <html data-frente="...">
   São dois produtos: Assistência Médica (Azul Destaque) e Pantanal Integra
   (Verde). O amarelo não é cor de produto: é ação e canal 24h, conforme o
   manual, e por isso marca o Plantão dentro do Integra. */
[data-frente="planos"]  { --accent: var(--blue); --accent-ink: var(--white); }
[data-frente="integra"] { --accent: var(--teal); --accent-ink: var(--white); }
[data-frente="rede"]    { --accent: var(--blue); --accent-ink: var(--white); }

/* Cor de cada frente do Integra — acompanha a frente por toda a página */
:root {
  --cor-mapa: var(--teal);
  --cor-rotina: var(--blue);
  --cor-plantao: var(--amber);
  --cor-mesa: var(--navy);
}

/* Métricas do fallback — reduz o salto quando a face real chega.
   Ajustadas para Inter e Sora sobre a fonte de sistema. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 100.5%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sora Fallback";
  src: local("Segoe UI Semibold"), local("Helvetica Neue"), local("Arial Bold");
  size-adjust: 96%;
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
}