/* =============================================================================
   NAVEC LABS — TOKENS
   -----------------------------------------------------------------------------
   Único arquivo do site onde existe valor bruto (hex, px, ms).
   Nenhum outro CSS pode escrever cor, duração ou curva de easing à mão.

   Organização:
     1. Marca            — as cores da paleta, cruas
     2. Semânticos       — o que cada cor SIGNIFICA num contexto
     3. Contexto escuro  — .section--dark redefine os semânticos
     4. Tipografia       — famílias e escala fluida
     5. Espaço e layout
     6. Traço, raio, sombra
     7. Movimento
   ========================================================================== */

/* ==========================================================================
   1. MARCA
   ========================================================================== */
:root {
  /* Paleta aprovada — "Profundidade Estratégica" */
  --navec-dark:    #0b2247;  /* azul profundo   */
  --navec-purple:  #5E4B8A;  /* púrpura estratégico */
  --navec-nebula:  #6f42c1;  /* roxo nebulosa   */
  --navec-pink:    #D96680;  /* rosa accent     */
  --navec-light:   #f8f9fa;  /* fundo claro     */

  /* Ampliação vinda do Instagram */
  --navec-void:    #06070d;  /* preto-azulado do fundo dos posts */
  --navec-ink:     #101322;  /* superfície escura elevada        */
  --navec-hot:     #f75d75;  /* rosa quente, pico do gradiente   */
  --navec-violet:  #8a3ffc;  /* roxo elétrico                    */

  /* --- Variantes de acessibilidade -----------------------------------------
     Medidas em WCAG 2.1 contra o fundo de destino. Existem porque os tons
     de marca reprovam em texto pequeno nesses contextos:
       #D96680 sobre #f8f9fa = 3,23:1  REPROVA  ->  --navec-pink-ink   4,97:1
       #8a3ffc sobre #06070d = 4,02:1  REPROVA  ->  --navec-violet-lit 5,14:1
     Os tons originais seguem válidos para superfície, borda, gradiente e
     texto grande (>=24px, ou >=19px bold), onde o mínimo é 3:1.
     ------------------------------------------------------------------------ */
  --navec-pink-ink:   #B84360;  /* rosa p/ texto pequeno sobre fundo CLARO  */
  --navec-violet-lit: #9B5CFF;  /* violeta p/ texto pequeno sobre ESCURO    */

  /* Neutros */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f9fa;
  --neutral-200: #e4e7ec;
  --neutral-300: #d7dbe2;
  --neutral-500: #6b7280;   /* 4,59:1 sobre --navec-light */
  --neutral-700: #3f4654;   /* 8,99:1 sobre --navec-light */

  --dark-100: #cdd3e0;      /* 13,40:1 sobre --navec-void */
  --dark-300: #9aa2b6;      /*  7,87:1 sobre --navec-void */
  --dark-600: #333a4d;
  --dark-700: #232839;

  /* Gradiente assinatura — a headline atravessada, da esquerda p/ direita */
  --grad-signature: linear-gradient(100deg,
    var(--navec-hot)    0%,
    var(--navec-pink)  28%,
    var(--navec-violet) 72%,
    var(--navec-nebula) 100%);

  --grad-main:   linear-gradient(135deg, var(--navec-nebula) 0%, var(--navec-purple) 100%);
  --grad-accent: linear-gradient(60deg,  var(--navec-nebula) 0%, var(--navec-pink)   100%);

  /* Brilho radial que segue o cursor nas seções escuras.
     --spot-x / --spot-y são escritos pelo JS em pointermove, com throttle rAF. */
  --spot-x: 50%;
  --spot-y: 0%;
  --grad-spotlight: radial-gradient(
    42rem circle at var(--spot-x) var(--spot-y),
    color-mix(in srgb, var(--navec-violet) 16%, transparent) 0%,
    transparent 62%);
}

/* ==========================================================================
   2. SEMÂNTICOS — contexto CLARO (padrão)
   Todo componente lê daqui. Nenhum componente lê da seção 1.
   ========================================================================== */
:root,
.section--light {
  --surface:         var(--navec-light);
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-200);
  --surface-invert:  var(--navec-void);

  --text:            var(--neutral-700);
  --text-strong:     var(--navec-dark);
  --text-muted:      var(--neutral-500);
  --text-invert:     var(--neutral-0);

  --accent:          var(--navec-pink-ink);   /* acessível sobre claro */
  --accent-loud:     var(--navec-pink);       /* só superfície e texto grande */
  --accent-alt:      var(--navec-nebula);

  --border:          var(--neutral-300);
  --border-strong:   var(--neutral-500);
  --border-dashed:   var(--neutral-500);

  --focus-ring:      var(--navec-nebula);
  --focus-ring-halo: color-mix(in srgb, var(--navec-nebula) 25%, transparent);

  --noise-opacity:   0.028;
  --grid-opacity:    0.06;
  --grid-color:      var(--navec-dark);

  color-scheme: light;
}

/* ==========================================================================
   3. SEMÂNTICOS — contexto ESCURO
   Uma classe redefine os tokens. Nenhum componente é duplicado por variante.
   ========================================================================== */
.section--dark {
  --surface:         var(--navec-void);
  --surface-raised:  var(--navec-ink);
  --surface-sunken:  #04050a;
  --surface-invert:  var(--navec-light);

  --text:            var(--dark-100);
  --text-strong:     var(--neutral-0);
  --text-muted:      var(--dark-300);
  --text-invert:     var(--navec-dark);

  --accent:          var(--navec-pink);       /* 5,90:1 sobre void */
  --accent-loud:     var(--navec-hot);
  --accent-alt:      var(--navec-violet-lit); /* 5,14:1 sobre void */

  --border:          var(--dark-700);
  --border-strong:   var(--dark-600);
  --border-dashed:   var(--dark-600);

  --focus-ring:      var(--navec-hot);
  --focus-ring-halo: color-mix(in srgb, var(--navec-hot) 30%, transparent);

  --noise-opacity:   0.05;
  --grid-opacity:    0.09;
  --grid-color:      #9fb4ff;

  color-scheme: dark;
}

/* Variante escura sobre azul profundo, para quebrar a monotonia do preto */
.section--deep {
  --surface:        var(--navec-dark);
  --surface-raised: #123059;
  --surface-sunken: #081a37;
}

/* ==========================================================================
   4. TIPOGRAFIA
   Duas famílias, ambas Google Fonts, variáveis, com font-display: swap.
   ========================================================================== */
:root {
  --font-display: 'Archivo', 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  /* Escala fluida — clamp puro, sem salto por breakpoint.
     Razão 1,2 no telefone, 1,333 no desktop. */
  --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.45vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.20vw, 2.66rem);
  --step-4:  clamp(1.95rem, 1.63rem + 1.60vw, 3.55rem);  /* mínimo medido: "Automatizamos" cabe em 320px */
  --step-5:  clamp(2.49rem, 1.94rem + 2.75vw, 4.74rem);

  /* Headline de hero — MEDIDA em 320px, não estimada.
     A palavra mais longa da copy é "OPERACIONAL" (11 caracteres). Em 320px
     sobram 265px úteis depois do gutter.

     Archivo em caixa alta ocupa ~0,77em por caractere em wdth 112 (expandido)
     e ~0,62em em wdth 88 (condensado). Por isso a largura acompanha a tela:
     condensada no telefone, expandida no desktop — que é exatamente para o que
     serve o eixo variável. Ver .headline-hero em components.css. */
  /* Máximo de 5rem (80px), não 7rem: MEDIDO, com 7rem a headline virava 7 linhas
     em 1920px. Com 80px e o contêiner em 68rem, "Caos operacional" (16 caracteres,
     0,805em cada em wdth 112) ocupa 1030px dos 1088px disponíveis — 2 linhas. */
  /* Mínimo 1,9rem (30,4px), não 2,15rem: MEDIDO, em 320px o nível cheio da
     headline caía em 3 linhas e o total batia 6 — um acima do teto de 5 do
     telefone. Com 30,4px, "está sugando o seu lucro." fecha em 2 linhas. */
  --step-hero: clamp(1.90rem, 1.25rem + 3.40vw, 5.00rem);

  /* --- Teto de altura da headline ------------------------------------------
     Cinco linhas em corpo único é um bloco alto, e altura é o que sempre nos
     derrubou. Este teto amarra a headline à ALTURA da tela, do mesmo jeito que
     já fazíamos no telefone deitado — só que agora em toda tela.
     Calibração num lugar só. A prioridade não mudou: o CTA fica na primeira
     tela, quem cede é a headline.
     ------------------------------------------------------------------------ */
  --hero-linha-teto: 8svh;

  /* --- ESCALA ÚNICA DE TÍTULOS ---------------------------------------------
     Toda <h1> do site usa --step-h1 com --leading-display.
     Todo título de seção usa --step-h2 com --leading-title.
     NENHUMA página redefine tamanho de título localmente — o check-chrome.py
     falha se o font-size ou o line-height computados divergirem entre páginas.

     --step-h1 combina as duas restrições: a largura (via --step-hero, que já
     garante que a linha mais longa cabe) e a altura (via --hero-linha-teto).
     ------------------------------------------------------------------------ */
  --step-h1: min(var(--step-hero), var(--hero-linha-teto));
  --step-h2: clamp(1.75rem, 1.45rem + 1.50vw, 3.00rem);

  /* Largura do bloco da headline, igual em todas as páginas. A linha mais longa
     de qualquer hero tem 18 caracteres; a 0,805em cada em wdth 112% e 80px de
     corpo, dá 1159px — cabe nos 74rem (1184px). */
  --hero-bloco: 74rem;

  /* Largura da headline. MEDIDO no Chrome: font-stretch NÃO aceita clamp()
     (resolve para 100% e a declaração é descartada), e font-variation-settings
     não interpola de forma confiável. Então a largura anda em degraus — que é
     honesto: largura não é a escala fluida de tamanho, é uma escolha
     tipográfica discreta. Os degraus vivem em .headline-hero. */
  --wdth-hero: 88%;

  /* --- Entrelinhas ---------------------------------------------------------
     --leading-tight (0.92) foi calibrado para headline de uma ou duas linhas em
     corpo grande. Com a headline em corpo ÚNICO e cinco linhas, aquilo fecha
     demais: o bloco vira uma mancha. Daí os dois degraus abaixo, que valem para
     o site inteiro.
     ------------------------------------------------------------------------ */
  --leading-display: 1.08;   /* H1 de todas as páginas */
  --leading-title:   1.12;   /* títulos de seção (H2)  */
  --leading-tight:   0.92;   /* só para headline de 1 ou 2 linhas */
  --leading-snug:    1.15;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;   /* corpo de artigo */

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-label:  0.22em; /* micro-rótulos técnicos do Instagram */

  /* Eixos variáveis do Archivo */
  --wdth-condensed: 88;
  --wdth-normal:   100;
  --wdth-expanded: 112;

  /* Medida de leitura — 68 a 75 caracteres */
  --measure: 68ch;
  --measure-narrow: 56ch;
}

/* ==========================================================================
   5. ESPAÇO E LAYOUT
   ========================================================================== */
:root {
  --space-3xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.48rem + 0.11vw, 0.56rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.17vw, 0.88rem);
  --space-s:   clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --space-m:   clamp(1.50rem, 1.43rem + 0.37vw, 1.69rem);
  --space-l:   clamp(2.00rem, 1.89rem + 0.50vw, 2.25rem);
  --space-xl:  clamp(3.00rem, 2.84rem + 0.75vw, 3.38rem);
  --space-2xl: clamp(4.00rem, 3.79rem + 1.00vw, 4.50rem);
  --space-3xl: clamp(6.00rem, 5.68rem + 1.50vw, 6.75rem);

  /* Respiro vertical de seção */
  --section-y:      clamp(3.5rem, 2.5rem + 5vw, 8rem);
  --section-y-tight:clamp(2.5rem, 2rem + 2.5vw, 4.5rem);

  --container:      75rem;    /* 1200px */
  --container-wide: 90rem;    /* 1440px */
  --container-prose:44rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Alvo de toque mínimo — WCAG 2.1 AA */
  --tap-min: 2.75rem;         /* 44px */
  --tap-gap: 0.5rem;          /* 8px entre alvos vizinhos */

  /* Altura do cabeçalho fixo, nos dois estados */
  --header-h:      4.5rem;
  --header-h-slim: 3.5rem;

  /* Recortes de tela — iPhone com notch */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* ==========================================================================
   6. TRAÇO, RAIO, SOMBRA
   ========================================================================== */
:root {
  --hairline: 1px;
  --dash: 1px dashed var(--border-dashed);

  --radius-xs:  0.375rem;
  --radius-s:   0.625rem;
  --radius-m:   1rem;
  --radius-l:   1.5rem;
  --radius-xl:  2rem;
  --radius-pill:999px;

  --shadow-s:  0 1px 2px rgb(6 7 13 / 0.06), 0 2px 8px rgb(6 7 13 / 0.05);
  --shadow-m:  0 2px 6px rgb(6 7 13 / 0.07), 0 12px 28px rgb(6 7 13 / 0.08);
  --shadow-l:  0 4px 12px rgb(6 7 13 / 0.09), 0 28px 56px rgb(6 7 13 / 0.12);
  --shadow-accent: 0 10px 30px color-mix(in srgb, var(--navec-pink) 30%, transparent);

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-float: 1010;
  --z-menu: 1020;
  --z-progress: 1030;
  --z-skip: 1040;
}

/* ==========================================================================
   7. MOVIMENTO
   Micro-interação: 180–420ms. Cena de rolagem: até 900ms.
   Anima só transform e opacity.
   ========================================================================== */
:root {
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-in:   cubic-bezier(.55, .06, .68, .19);
  --ease-out:  cubic-bezier(.22, .61, .36, 1);

  --dur-fast:  180ms;
  --dur:       280ms;
  --dur-slow:  420ms;
  --dur-scene: 900ms;

  /* Deslocamento da revelação por rolagem — curto, 16–24px */
  --reveal-shift: 1.25rem;
  --reveal-stagger: 70ms;

  /* Botão magnético — deslocamento máximo */
  --magnet-max: 6px;
}

/* Telefone deitado (~844×390) — a única tela do site em que o teto de altura da
   headline muda. E ele muda AQUI, no token, não na página: a escala de títulos
   continua tendo um dono só, e o check-chrome.py continua podendo exigir isso.
   A prioridade não mudou: o CTA fica na primeira tela; quem cede é a headline.
   MEDIDO em 667×375: com 8svh sobravam 2px abaixo do CTA; com 7,5svh e a
   entrelinha fechada, sobram ~40px de folga para a barra do navegador. */
@media (max-height: 30rem) {
  :root {
    --hero-linha-teto: 7.5svh;
    --leading-display: 0.92;
  }
}

/* Um único ponto de desligamento do movimento no site inteiro. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-scene: 0.01ms;
    --reveal-shift: 0px;
    --reveal-stagger: 0ms;
    --magnet-max: 0px;
  }
}