/* ============================================================================
   Kelvin Pilotto — Design Tokens
   ----------------------------------------------------------------------------
   Valores extraídos do portfólio de referência
   (pilottodigital.com.br/portfolio-kelvin-piloto): canvas cinza-quente, lajes
   empilhadas de topo arredondado, tipografia display enorme e leve, e o par
   Plus Jakarta Sans + Poppins.

   Onde houve ajuste, foi só por contraste — o cinza das lajes desceu de
   #9B9B9B para #8A8A88 porque texto branco sobre o original dá 2,76:1 e
   reprova em AA até como texto grande. A diferença é imperceptível ao lado;
   a legibilidade, não.
   ========================================================================= */

:root {

  /* --- Superfícies -------------------------------------------------------
     A página inteira é uma pilha de lajes sobre o canvas cinza-quente. */
  --canvas:       #E9E9E7;   /* fundo do documento */
  --canvas-soft:  #F2F2F0;   /* variação clara, para blocos internos */
  --slab-dark:    #111111;   /* laje escura */
  --slab-gray:    #8A8A88;   /* laje cinza (referência: #9B9B9B) */
  --white:        #FFFFFF;

  /* Cartões sobre as lajes: azul-ardósia translúcido, como na referência.
     A opacidade subiu de 0,54 para 0,86 porque sobre a laje CINZA o composto
     de 0,54 dá rgb(95,102,109) — claro demais, e todo rótulo pequeno em cima
     reprovava (1,7:1 no roxo, 2,5:1 no laranja). Com 0,86 a geometria e a
     família de cor continuam as mesmas; só o cartão fica legível. */
  --card-veil:    rgba(41, 50, 60, 0.86);
  --card-veil-up: rgba(41, 50, 60, 0.94);   /* estado hover */
  --card-solid:   #3B4856;

  /* --- Tinta -------------------------------------------------------------- */
  --ink:          #1A1730;   /* títulos sobre claro — 13,4:1 no canvas */
  --ink-pure:     #000000;   /* display do hero e o "p" do logo */
  --text:         #666666;   /* corpo sobre claro — 5,3:1 no canvas */
  /* 0,86 e não 0,74: sobre o cartão translúcido apoiado na laje cinza, o
     composto fica claro e 0,74 cai para 4,03:1 — reprova em AA. */
  --text-on-dark: rgba(255, 255, 255, 0.86);
  --line:         rgba(26, 23, 48, 0.14);
  --line-on-dark: rgba(255, 255, 255, 0.22);

  /* --- Acentos -----------------------------------------------------------
     Do kit global da referência. O roxo é legível sobre o canvas (5,4:1) e o
     laranja sobre as lajes escuras (8,5:1) — cada um só aparece no fundo em
     que passa em AA, por isso existem as duas variantes "-on-dark". */
  /* Um acento só, na família do laranja. O roxo saiu do tema.
     O tom de assinatura é o laranja light dos subtítulos (#FFB870): ele
     preenche botões e brilha sobre fundo escuro. Como TEXTO sobre o canvas
     claro ele daria 2,1:1, então ali entra a versão escurecida — mesma
     família, contraste resolvido. */
  --accent:          #FFB870;   /* laranja light — cor de assinatura */
  --accent-strong:   #FF8F30;   /* laranja cheio, hover de superfície */
  --accent-deep:     #C25100;   /* 3,9:1 — só display grande, ícone e borda */

  /* Dois laranjas escuros, não um: #C25100 dá 3,9:1 no canvas, o que basta
     para o display de 96px e para traços (3:1), mas reprova nos rótulos de
     12px. Estes precisam de #A84600, que chega a 4,9:1. */
  --accent-on-light: #A84600;   /* 4,9:1 no canvas — texto pequeno */
  --accent-on-dark:  #FFB870;   /* 5,9:1 no cartão e na laje preta */

  /* Aliases da trilha Sistema, mantidos para os componentes que já os usam. */
  --accent-2:          #FF8F30;
  --accent-2-deep:     #FF622A;
  --accent-2-on-light: #C25100;
  --accent-2-on-dark:  #FFB870;

  /* --- Tipografia --------------------------------------------------------
     Plus Jakarta Sans no display (o hero de 115px em peso 300 é a assinatura
     da referência); Poppins na interface e no corpo. */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-ui:      "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida. O topo de cada clamp é o valor medido na referência. */
  --fs-hero:      clamp(3.25rem, 1.1rem + 8.6vw, 7.1875rem);  /* → 115px */
  --fs-h1:        clamp(2.5rem,  1.4rem + 3.6vw, 4rem);
  --fs-slab:      clamp(1.875rem, 1.35rem + 2.1vw, 2.5rem);   /* → 40px, peso 200 */
  --fs-sub:       clamp(1.5rem,  1.15rem + 1.4vw, 2.05rem);   /* → 32.8px, peso 300 */
  --fs-h3:        clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-lead:      clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-body:      1rem;
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;
  --fs-micro:     0.75rem;

  --lh-hero:      1.25;    /* 143.75 / 115, medido na referência */
  --lh-flat:      1;
  --lh-snug:      1.3;
  --lh-body:      1.75;

  --ls-tight:     -0.01em; /* -1.15px em 115px */
  --ls-wide:      0.16em;

  /* --- Geometria ---------------------------------------------------------
     O raio das lajes e o recuo negativo andam juntos: a laje sobe exatamente
     o mesmo tanto que arredonda, e o topo curvo cobre a seção anterior. */
  --slab-radius:  80px;
  --slab-overlap: -80px;

  /* Folga de rolagem depois que o conteúdo da laje termina. É o intervalo em
     que a laje já encaixou e a seguinte ainda não começou a subir por cima —
     sem ela a próxima entra no mesmo instante do encaixe e o fim da seção
     some antes de ser lido. Descontada a sobreposição, a folga real é
     --slab-dwell menos 80px. Sem JS não há empilhamento — a folga viraria só
     um vão morto no fim de cada seção, então ela nasce zerada e só entra
     junto com a classe `.js` (regra logo abaixo, fora do :root). */
  --slab-dwell:   0px;

  /* Respiro entre o fim do conteúdo e o rodapé da janela no momento do
     encaixe: sem ele a última linha fica colada na borda inferior. */
  --slab-settle-gap: 32px;

  /* Canto gigante das linhas alternadas.
     Na referência é 560px, mas ali ele é aplicado a faixas de 912×270 — a
     altura clampa o raio e o efeito vira uma ponta arredondada. Aplicado a
     um card alto de 500×400, o mesmo 560px abre um quarto de círculo que
     engole o conteúdo. Por isso o raio é por componente, proporcional à
     altura de cada um, em vez de um valor único. */
  --r-giant-row:  min(560px, 50vw);   /* faixas baixas e largas */
  --r-giant-card: 140px;              /* cards altos (depoimento, processo) */
  --r-giant-tall: 180px;              /* pilares e cases */
  --r-card:       32px;
  --r-md:         16px;
  --r-sm:         10px;
  --r-pill:       999px;

  /* --- Espaçamento -------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --section-y:    clamp(3.5rem, 2rem + 6vw, 6rem);
  --section-y-lg: clamp(4.5rem, 2.5rem + 8vw, 7.5rem);

  --container:    1140px;   /* largura interna medida na referência */
  --container-wide: 1265px;
  --gutter:       clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  /* --- Sombras e movimento ------------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.20);

  --ease:     cubic-bezier(0.32, 0.72, 0.28, 1);
  --dur:      0.3s;
  --dur-fast: 0.18s;

  /* Movimento de entrada. O "encaixe" das lajes usa uma curva com leve
     ultrapassagem — a laje passa do ponto e volta, que é o que dá a
     sensação de pasta assentando no lugar em vez de só deslizar. */
  --ease-settle: cubic-bezier(0.22, 1.12, 0.36, 1);
  --dur-reveal:  0.72s;
  --stagger:     70ms;

  --header-h: 84px;
}

/* A folga de rolagem das lajes só faz sentido com a pilha ligada, e a pilha
   só liga com JS (ver .js .slab em style.css). Mesma especificidade do :root
   acima, então quem vale é esta por vir depois. */
.js {
  --slab-dwell: clamp(180px, 30vh, 340px);
}