/* ===========================================================================
 * tokens.css — o DNA visual do site da Laís Paschoal, em variáveis.
 * Origem de cada número: direcao/spec.md (medido na imagem base),
 * direcao/fontes.md, direcao/coreografia.md e identidade/design-guide.md.
 * Variável nomeada por PAPEL, nunca por cor. O resto do site herda daqui.
 * ===========================================================================*/

/* --- Fontes self-hosted (font-src 'self' no pacote de headers) ------------ */

/* A headline usa uma INSTÂNCIA ESTÁTICA da Fraunces, gerada por
   fontTools.varLib.instancer a partir do woff2 variável no ponto exato que a
   peça desenha: wght 380 · opsz 144 · SOFT 0 · WONK 0.
   Motivo (achado do verificador de animação, rodada 4): o raster da variável
   diverge entre motores (no WebKit ela sai mais gorda e a linha encosta na
   máscara). A estática é o mesmo desenho em todo lugar. Bônus medido: 17,2 KB
   + 15,9 KB no lugar de 121 KB + 105 KB no caminho crítico.
   A variável continua abaixo como plano B — só baixa se a estática falhar. */
@font-face {
  font-family: "Fraunces 380";
  src: url("../fonts/fraunces-380-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces 380";
  src: url("../fonts/fraunces-380-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

/* Fallbacks com métrica corrigida: o texto não pula quando a webfont chega.
   size-adjust/ascent-override medidos no Chromium contra as fontes reais. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "General Sans Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* --- Cor (papel → hex; amostrado na imagem base) ---------------------- */
  --chao: #f3ede3;              /* creme de papel, o fundo de tudo */
  --chao-sombra: #e2d6cb;       /* fim da vinheta, canto inferior direito */
  --parede-foto: #e6dbcf;       /* parede da cena; fallback se a camada falhar */
  --tinta: #452518;             /* texto da peça: headline, rótulo, menu */
  --tinta-max: #151311;         /* a assinatura */
  --tinta-fraca: rgba(69, 37, 24, 0.68); /* texto secundário; nunca cinza puro */
  --acao: #47261a;              /* fundo do botão primário */
  --acao-hover: #5a3324;
  --acao-ativa: #3b2418;
  --sobre-acao: #fdfaf5;        /* texto sobre a ação */
  --acento: #d0b391;            /* filete mel do header: o único ponto cromático */
  --apoio: #a88d7b;             /* filete divisor */
  --borda: rgba(59, 36, 24, 0.12);
  --foco: #47261a;              /* anel de foco */

  /* --- Tipografia ------------------------------------------------------- */
  --fonte-titulo: "Fraunces 380", "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --fonte-apoio: "General Sans", "General Sans Fallback", "Segoe UI", Helvetica, Arial, sans-serif;

  /* headline: caixa-alta medida 83px @1586 → 75px @1440 (corpo ~104px) */
  --tam-headline: clamp(3.5rem, 7.35vw, 8.5rem);
  --entre-headline: 0.945;  /* 100px de baseline a baseline, medido */
  --tracking-headline: -0.018em;

  --tam-rotulo: clamp(0.875rem, 0.97vw, 0.9375rem);
  --tracking-rotulo: 0.62em;   /* largura da tinta batida contra a imagem: 262px @1440 */

  --tam-nav: clamp(0.9375rem, 1.04vw, 1rem);
  --tracking-nav: 0.04em;

  --tam-botao: 0.875rem;
  --tracking-botao: 0.14em;

  --tam-corpo: clamp(1rem, 1.08vw, 1.0625rem);
  --entre-corpo: 1.6;

  /* --- Respiro (base 8; os números vêm do spec convertido a 1440×901) ---
     A escala INTEIRA fica, mesmo com r1/r2/r7-r12 ainda sem uso na dobra:
     é a régua de espaçamento do site, não sobra da peça. Quebrar a escada no
     meio faria a próxima seção inventar número fora da base 8. */
  --r1: 0.5rem;    /* 8  */
  --r2: 1rem;      /* 16 */
  --r3: 1.5rem;    /* 24 */
  --r4: 2rem;      /* 32 */
  --r5: 2.5rem;    /* 40 — rótulo → headline */
  --r6: 3.5rem;    /* 56 — headline → filete → botão */
  --r7: 4rem;      /* 64 — altura do botão */
  --r8: 5rem;      /* 80 */
  --r9: 6rem;      /* 96 */
  --r10: 8rem;     /* 128 — margem da coluna de conteúdo */
  --r11: 9.5rem;   /* 152 — botão → borda inferior */
  --r12: 10rem;    /* 160 — header → rótulo */

  /* --- Geometria da peça ------------------------------------------------ */
  --raio: 0;                              /* raio 0 em tudo (medido) */
  --h-header: 88px;                       /* faixa do header @1440 */
  --h-header-condensado: 64px;
  --margem-header: clamp(1.5rem, 4.1vw, 59px);      /* 59px @1440 */
  --margem-conteudo: clamp(1.5rem, 8.89vw, 128px);  /* 128px @1440 */
  --filete-mel: 3px;
  --filete-divisor: 2px;
  --largura-divisor: 348px;               /* 24,21% de 1440 */
  --largura-botao: 220px;
  --altura-botao: 64px;
  --largura-cena: 63%;                    /* metade direita da cena */

  /* logo: a tinta mede 168×64; o arquivo tem 3% de folga em volta */
  --logo-largura: 175px;
  --logo-altura: 74px;
  --logo-largura-condensada: 131px;
  --logo-altura-condensada: 56px;
  --logo-recuo: 3.5px;                    /* folga do arquivo até a tinta */

  /* --- Movimento (tokens da coreografia) -------------------------------- */
  --curva-mae: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-estado: cubic-bezier(0.2, 0.8, 0.3, 1);
  --curva-cenica: cubic-bezier(0.16, 1, 0.3, 1);
  --t-medio: 280ms;
  --t-lento: 520ms;
  --t-estado: 200ms;
  --entrada-curta: 8px;
  --stagger: 70ms;
  --velocidade-regua: 620; /* px/s — viaja pro mobile (assinatura B) */

  /* Assinatura B: recalculado por JS a partir da largura real da janela.
     Os valores abaixo são o fallback de 1440px se o JS não rodar. */
  --b-dur-mel: 2323ms;
  --b-delay-divisor: 206ms;
  --b-dur-divisor: 561ms;
  --b-delay-l1: 1069ms;
  --b-delay-l2: 1075ms;
  --b-delay-l3: 641ms;
}

@media (max-width: 899px) {
  :root {
    --h-header: 72px;
    --h-header-condensado: 56px;
    --logo-largura: 131px;
    --logo-altura: 56px;
    --logo-largura-condensada: 109px;
    --logo-altura-condensada: 46px;
    --logo-recuo: 2.6px;
    --altura-botao: 56px;
    /* durações −20% e entrada menor, como manda a coreografia no mobile */
    --t-medio: 240ms;
    --t-lento: 420ms;
    --entrada-curta: 6px;
    --stagger: 60ms;
    /* mobile: escala do busto sobre a largura da caixa da cena (derivado) */
    --escala-busto: 215%;
  }
}

/* --- Telas estreitas: a quebra das 3 linhas se mantém CABENDO -------------
   A headline não usa `white-space: nowrap` (isso decepava copy maior). Quem
   segura as 3 linhas da imagem é o corpo: "revelam quem" mede 285,94px de
   tinta a 56px e a coluna de conteúdo entrega 0,8222 × largura da tela — ou
   seja, 56px só cabe de ~358px pra cima. Abaixo disso o corpo cede o MÍNIMO
   pra manter ~8px de folga, de forma contínua (sem degrau ao redimensionar):
   358px → 56,0px · 340px → 53,1px · 320px → 49,9px. Medido a 320: coluna
   263,1px. De 358px pra cima nada muda — o `min()` devolve os 3,5rem. */
@media (max-width: 359px) {
  :root { --tam-headline: min(3.5rem, 16.1vw - 1.6px); }
}

/* O rótulo tem o mesmo problema por outro caminho: com 0,62em de tracking ele
   mede 272,64px e a coluna a 320px tem 263,1px. Abaixo de 340px o tracking
   cede pra 0,52em (250,25px de tinta, 12,85px de folga) e a linha continua
   única. O 0,62em medido na imagem vale de 340px pra cima, que é onde a
   coluna comporta — e a imagem é desktop, não tem palavra sobre 320. */
@media (max-width: 339px) {
  :root { --tracking-rotulo: 0.52em; }
}