/* ============================================================
   PAN Aquática · tokens
   Cópia fiel do bloco :root de BRAND-TOKENS.md seção 6.
   NÃO escrever cor, fonte ou medida fora deste arquivo.
   Se aparecer HEX em pan.css, é erro.
   ============================================================ */

:root{
  /* ---------- tipografia ---------- */
  --font-sans:'jali-latin-variable','Jali Latin Variable',Helvetica,sans-serif;

  --fw-extralight:200; --fw-light:300; --fw-regular:400; --fw-medium:500;
  --fw-semibold:600;   --fw-bold:700;  --fw-extrabold:800; --fw-black:900;

  --fs-eyebrow:0.8125rem;  /* 13px. era 11px. subiu 2px a pedido */
  --fs-meta:0.75rem;       /* 12px */
  --fs-body-s:0.875rem;    /* 14px */
  --fs-body:1.0625rem;     /* 17px */
  --fs-body-l:1.25rem;     /* 20px */
  --fs-h6:1.375rem;        /* 22px */
  --fs-h5:1.75rem;         /* 28px */
  --fs-h4:2.25rem;         /* 36px */
  --fs-h3:3rem;            /* 48px */
  --fs-h2:4rem;            /* 64px */
  --fs-h1:5.5rem;          /* 88px */
  --fs-mare:clamp(1.5rem, 3.6vw, 2.75rem);  /* 🔵 palavras da maré */

  /* 🔵 escala de display fluida, trazida do estudo BASE 2.
     Substitui os saltos por media query nos títulos grandes */
  --fs-d1:clamp(1.75rem, 4.4vw, 3rem);   /* manchete do hero. teto de volta
                                            no 48px original; só o degrau
                                            por media query virou fluido  */
  --fs-d2:clamp(2.1rem, 5vw, 4rem);      /* título de seção           */
  --fs-d3:clamp(1.6rem, 3.2vw, 2.5rem);  /* título de passo e cartão  */

  --tracking-display:-0.015em;
  --tracking-body:0;
  --tracking-micro:0.08em;

  --lh-tight:1.05; --lh-snug:1.25; --lh-normal:1.5; --lh-loose:1.65;

  /* ---------- cor canônica ---------- */
  --pan-vapor-100:#F2EBE0;
  --pan-vapor-60:#F7F3EC;
  --pan-vapor-40:#FAF7F3;

  --pan-profundas-100:#2F3D37;
  --pan-profundas-80:#59645F;
  --pan-profundas-60:#828B87;
  --pan-profundas-40:#ACB1AF;
  --pan-profundas-20:#D5D8D7;
  --pan-profundas-10:#EAECEB;

  --pan-pedra:#577570;                /* atalho para a canônica */
  --pan-barro:#B56A3E;

  /* ============================================================
     ESCALA DE TINTA · Pedra úmida e Barro
     Extensão de paleta, pendente de homologação no brandbook.

     O manual publica escala 80/60/40/20/10 apenas para Vapor e
     Águas profundas, e diz que Pedra úmida e Barro não têm escala.
     Em interface isso não se sustenta: nenhuma das duas passa AA
     como texto sobre nenhum dos dois fundos da marca.

     Mesma régua do manual. Tinta = % da cor sobre Vapor.
     Sombra = mistura com Águas profundas, para texto sobre claro.
     Documentado em BRAND-TOKENS.md §2.1.
     ============================================================ */

  /* Pedra úmida */
  --pan-pedra-100:#577570;   /* 🟢 canônica                        */
  --pan-pedra-80:#768D86;
  --pan-pedra-60:#95A49D;
  --pan-pedra-40:#B4BCB3;    /* 5,23:1 no cartão de vidro          */
  --pan-pedra-20:#D3D3CA;
  --pan-pedra-10:#E3DFD5;
  --pan-pedra-s70:#4B645F;   /* 5,38:1 sobre Vapor                 */
  --pan-pedra-s85:#516D67;   /* 🔵 degrau de LEITURA: Pedra úmida como
                                fundo com texto Vapor por cima, 4,75:1.
                                A pedra pura dá 4,24:1 e reprova AA  */
  --pan-pedra-s50:#435954;   /* 6,35:1 sobre Vapor                 */

  /* Barro */
  --pan-barro-100:#B56A3E;   /* 🟢 canônica. só filete, borda, ícone */
  --pan-barro-80:#C1845E;
  --pan-barro-60:#CD9E7F;
  --pan-barro-40:#DAB79F;    /* 6,12:1 sobre escuro · 5,48:1 no vidro */
  --pan-barro-20:#E6D1C0;
  --pan-barro-10:#ECDED0;
  --pan-barro-s70:#8D5C3C;   /* 4,74:1 sobre Vapor                 */
  --pan-barro-s50:#72543B;   /* 5,85:1 sobre Vapor                 */

  /* ---------- cor semântica ---------- */
  --fg-1:var(--pan-profundas-100);
  --fg-2:var(--pan-profundas-80);
  /* terciário: 5,38:1. Era Pedra úmida pura, que dá 4,24:1 e falha AA
     em texto pequeno. O manual já registrava a ressalva "só ≥18.66px",
     e o site usa este token em legenda e meta. Ver BRAND-TOKENS §2.1. */
  --fg-3:var(--pan-pedra-s70);
  --fg-link:var(--pan-profundas-100);

  --fg-inv-1:var(--pan-vapor-100);
  --fg-inv-2:var(--pan-profundas-20);

  --bg-page:var(--pan-vapor-100);
  --bg-recess:var(--pan-vapor-60);
  --bg-mid:var(--pan-pedra);
  --bg-dark:var(--pan-profundas-100);

  --line-1:rgba(47,61,55,.14);
  --line-2:var(--pan-profundas-40);
  --line-accent:var(--pan-barro);

  /* rótulos: um tom por tipo de fundo */
  /* Rótulo por superfície. O vídeo clareia o fundo da cena, e por isso
     lá o barro precisa ser mais claro para manter 4,5:1. Em Águas
     profundas puro o 60% passa e mantém muito mais cor. */
  --fg-rotulo:var(--pan-barro-s70);       /* sobre Vapor          · 4,74:1 */
  --fg-rotulo-inv:var(--pan-barro-60);    /* sobre Águas profundas· 4,77:1 */
  --fg-rotulo-video:var(--pan-barro-40);
  --fg-rotulo-foto:var(--pan-barro-20);  /* numeral sobre foto · 4,16:1,
                                            usado a 24px, criterio de texto grande */
  --fg-acao-inv:var(--pan-pedra-40);      /* chamada na cena      · 5,23:1 */

  /* ---------- 🔵 supridos para o site ----------
     Não estão em BRAND-TOKENS.md. Derivados das cores canônicas por
     transparência, sem introduzir matiz nova. Precisam de validação. */
  --line-inv:rgba(242,235,224,.18);   /* hairline sobre fundo escuro   */
  --hover-inv:rgba(242,235,224,.06);  /* realce de hover sobre escuro  */
  --veu-desfoque:12px;                /* desfoque atrás da gaveta      */
  --vapor-rgb:242,235,224;            /* Vapor, canais soltos, para o véu
                                         de leitura sobre a água da abertura */
  --vidro-rgb:47,61,55;               /* Aguas profundas, canais soltos,
                                         para o vidro jateado da cena  */
  --pedra-rgb:87,117,112;             /* Pedra úmida, canais soltos, para o
                                         véu atrás da gaveta do menu    */
  --veu-1:rgba(47,61,55,1);          /* véu da submersão, topo e base */
  --veu-2:rgba(47,61,55,.72);         /* véu da submersão, meio        */

  /* ---------- espaço ---------- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:96px;  --space-10:128px; --space-11:180px;

  /* ---------- grid ---------- */
  --max-width:1240px;
  --measure:700px;
  --bp-mobile:640px; --bp-tablet:1024px; --bp-desktop:1440px;

  /* ---------- forma ---------- */
  --r-0:0; --r-1:2px; --r-2:4px; --r-pill:999px;
  /* 🔵 raio orgânico, em teste. assimetria calma, não blob */
  --r-org-a:32px; --r-org-b:6px;
  --shadow-1:0 1px 0 rgba(47,61,55,.08);

  /* 🔵 duotone das fotografias, suprido no estudo BASE 2:
     mata o ciano de piscina e pousa a imagem na família da
     Pedra úmida. sépia leva ao âmbar e o giro de 125° devolve
     ao verde-cinza da marca */
  --filtro-agua: grayscale(1) sepia(.42) saturate(.45) hue-rotate(125deg)
                 brightness(.97) contrast(.9);

  /* ---------- movimento ---------- */
  --ease-agua:cubic-bezier(.22,.61,.36,1);
  --dur-1:200ms; --dur-2:420ms; --dur-3:720ms; --dur-4:1200ms;
}