/* ==========================================================================
   Ilux Flow · tokens.css
   :root, reset e tipografia base. Fonte única da verdade para cor e ritmo.
   Nunca escrever hex solto nos outros arquivos.
   ========================================================================== */

/* --- fonte self-hosted (variável 400–700, um arquivo por subset) --------- */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/SchibstedGrotesk-latin.woff2") format("woff2");
  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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2");
  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;
}

:root {
  /* superfícies */
  --cream:   #FBF6F2;
  --cream-2: #F4ECE6;
  --white:   #FFFFFF;
  --ink:     #131E2B;

  /* texto */
  --ink-70: rgba(19, 30, 43, .70);
  --ink-50: rgba(19, 30, 43, .50);
  --line:   rgba(19, 30, 43, .12);

  /* acentos */
  --coral:   #FF4A1C;
  --pink:    #FF4D82;
  --pink-dk: #E0255F;   /* usar sempre que o rosa carregar texto */
  --amber:   #FFB43D;
  --blush:   #FFE3E6;

  /* gradiente da marca */
  --flow: linear-gradient(105deg,
            #FFC24B 0%,
            #FF5E2B 36%,
            #FF4D82 70%,
            #FF93BC 100%);

  /* variante do gradiente para CARREGAR TEXTO em fundo claro.
     O --flow original reprova em WCAG (a ponta âmbar dá 1,5:1 no creme).
     Este passa 3:1 no stop mais claro e 5:1 no mais escuro. */
  --flow-text: linear-gradient(100deg,
                 #D9710A 0%,
                 #E8431A 38%,
                 #E0255F 72%,
                 #C81E63 100%);

  /* rosa para texto pequeno em creme, o --pink-dk fica em 4,3:1 */
  --pink-txt: #C9194F;

  /* tipografia */
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ritmo */
  --pad: clamp(20px, 5vw, 72px);
  --sec: clamp(72px, 11vw, 140px);

  /* cromo */
  --nav-h: 68px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* âncoras param abaixo da nav sticky */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* trava o scroll horizontal sem criar contexto de contenção no eixo Y
     (overflow-x: hidden no body quebraria o pin do ScrollTrigger) */
  overflow-x: clip;
}

/* `height: auto` junto com `max-width` nao e detalhe: com os atributos `width`
   e `height` no HTML (que sao obrigatorios, para o navegador reservar o espaco
   antes de baixar a imagem), o `max-width: 100%` sozinho encolhe a LARGURA e
   deixa a altura no numero do atributo. A imagem estica. Foi o que aconteceu
   com o painel do hero em quem tinha o CSS antigo em cache: 520 de largura com
   504 de altura, quando o arquivo e 950x504. */
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, blockquote, figure, ul, ol, dl, dd {
  margin: 0;
}
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* --- tipografia ---------------------------------------------------------- */
.display {
  font-size: clamp(2.55rem, 6.1vw, 4.9rem);
  font-weight: 500;
  letter-spacing: -.042em;
  line-height: .99;
  text-wrap: balance;
}

h2, .h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.95rem);
  font-weight: 500;
  letter-spacing: -.032em;
  line-height: 1.04;
  text-wrap: balance;
}

h3, .h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 56ch;
}

p { max-width: 62ch; }

.note {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-50);
  max-width: 56ch;
}

/* texto no gradiente da marca, só em ≥24px e peso 600, nunca abaixo.
   .in-flow      → fundo claro (creme/branco), usa o gradiente escurecido
   .in-flow-lift → fundo ink, onde o gradiente original já tem contraste */
.in-flow,
.in-flow-lift {
  /* background-image, nunca a shorthand: a shorthand reseta background-clip
     e o texto vira uma barra de gradiente sólida. */
  background-image: var(--flow-text);
  /* Estado de REPOUSO declarado por extenso: o gradiente preenche o texto
     exatamente uma vez. A varredura de entrada parte de 300%/100% e resolve
     nestes valores, então o desenho final é o daqui, a animação não redefine
     a aparência da marca, só chega nela. */
  background-size: 100% 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* se background-clip falhar, o texto continua legível */
  -webkit-text-fill-color: transparent;
}
.in-flow-lift { background-image: var(--flow); }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .in-flow, .in-flow-lift { color: var(--coral); -webkit-text-fill-color: currentColor; }
}

/* --- foco ---------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* pular para o conteúdo */
.skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 600;
  transition: top .18s ease;
}
.skip:focus { top: 12px; }

/* --- navegação por âncora ------------------------------------------------
   scroll-padding, não scroll-margin item a item: a folga passa a ser do
   scroller, então vale para clique no menu, para #hash na URL e para o Tab.
   Sem ela a nav fixa cobria o topo da seção recém-apontada.
   O bloco de movimento reduzido logo abaixo devolve o salto instantâneo. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
}

/* --- movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}