/* ============================================================================
   ZF Partners - Design tokens
   v1 - "Institucional claro, sinal lima"
   Extraído do hero construído (Figma "Hero final") e expandido.

   TRÊS CAMADAS. Nunca pule a camada 2 no código de componente.
   1. Primitivas  - valores brutos (--navy-700, --slate-300). Não use direto.
   2. Semânticas  - papéis (--bg-page, --text-primary, --accent). USE ESTAS.
   3. Componente  - medidas de peça específica (--header-h, --hero-h).

   Regra: valor solto (hex, rgb, px de cor/raio/sombra/duração) em CSS de
   componente é falha de auditoria. Rode `node design_system/scripts/token-audit.js`.
   ============================================================================ */

:root {

  /* ==========================================================================
     CAMADA 1 - PRIMITIVAS
     ========================================================================== */

  /* --- Navy: a cor institucional. Base de tudo que é escuro. --------------- */
  --navy-950: #061127;
  --navy-900: #0A1D3E;
  --navy-800: #0D2650;
  --navy-700: #112F60;   /* oficial do manual da marca */
  --navy-600: #1B4184;
  --navy-500: #2A57A8;
  --navy-400: #4A6193;
  --navy-300: #8095C0;
  --navy-200: #A8B6D1;
  --navy-100: #CFD8E8;
  --navy-050: #EAEFF7;

  /* --- Lima: o sinal. Só CTA, destaque e marca-texto. --------------------- */
  --lime-700: #A8C70E;
  --lime-600: #B8DC0E;
  --lime-500: #D2F912;   /* oficial do manual da marca */
  --lime-400: #DEFB55;
  --lime-200: #EDFDA6;
  --lime-050: #F7FEDF;

  /* --- Slate: a escala neutra fria. É onde o site respira. ----------------
     Os cinco degraus do manual estão marcados. Os outros são interpolação
     para dar respiro sem sair da temperatura da marca (todos puxam azul). */
  --slate-025: #FAFBFD;
  --slate-050: #F4F6F9;
  --slate-100: #E9EDF2;
  --slate-200: #D1D7E0;  /* manual */
  --slate-300: #ABB1BA;  /* manual */
  --slate-400: #8E959F;
  --slate-500: #7C8189;  /* manual */
  --slate-600: #667083;
  --slate-700: #555960;  /* manual */
  --slate-800: #43474D;
  --slate-900: #32353A;  /* manual */
  --slate-950: #1E2024;

  --white: #FFFFFF;

  /* --- Accents de apoio (manual da marca) ---------------------------------
     Existem, mas não mandam. Servem para categorizar (ícone de serviço,
     tag, ilustração), nunca para CTA nem para bloco grande de fundo. */
  --purple-600: #472572;
  --purple-500: #582F8E;  /* manual */
  --purple-100: #E6DCF3;
  --orange-600: #A85826;
  --orange-500: #CC6E2F;  /* manual */
  --orange-100: #F7E5D7;

  /* --- Luz da arte do hero ------------------------------------------------ */
  --hero-light: #5587D4;
  --hero-light-core: rgb(85 135 212 / 0.64);
  --hero-light-edge: rgb(85 135 212 / 0);
  /* --- Merge da foto do hero no navy (foto full bleed à direita) ---------- */
  --hero-merge-strong: rgb(17 47 96 / 0.72);
  --hero-merge-soft: rgb(17 47 96 / 0.28);
  --hero-merge-faint: rgb(17 47 96 / 0.14);

  /* --- Fades (mesma cor, alpha zero) - usados em gradiente ---------------- */
  --navy-fade: rgb(17 47 96 / 0);
  --white-fade: rgb(255 255 255 / 0);


  /* ==========================================================================
     CAMADA 2 - SEMÂNTICAS (use estas no componente)
     ========================================================================== */

  /* --- Superfícies --------------------------------------------------------- */
  --bg-page: var(--white);          /* fundo padrão da página */
  --bg-subtle: var(--slate-050);    /* seção alternada, respiro */
  --bg-muted: var(--slate-100);     /* card dentro de fundo claro */
  --bg-inverse: var(--navy-700);    /* seção escura (hero, CTA final) */
  --bg-inverse-deep: var(--navy-900);
  --bg-card: var(--white);          /* card sobre fundo escuro ou claro */
  --bg-glass: rgb(255 255 255 / 0.16);        /* botão fantasma sobre foto */
  --bg-glass-hover: rgb(255 255 255 / 0.26);
  --bg-glass-faint: rgb(255 255 255 / 0.06); /* barra de alerta sobre navy */

  /* --- Texto --------------------------------------------------------------- */
  --text-primary: var(--navy-700);   /* título e corpo sobre claro */
  --text-secondary: var(--slate-700);/* corpo secundário sobre claro */
  --text-muted: var(--slate-600);    /* link de nav, legenda, meta */
  --text-brand: var(--navy-500);     /* número, marca de prova */
  --text-on-inverse: var(--white);   /* texto sobre navy */
  --text-on-inverse-muted: var(--navy-200);
  --text-on-accent: var(--navy-700); /* texto sobre lima */

  /* --- Traço e borda -------------------------------------------------------- */
  --border-subtle: var(--slate-200);
  --border-strong: var(--navy-700);
  --border-on-inverse: rgb(255 255 255 / 0.22);

  /* --- Ação ---------------------------------------------------------------- */
  --accent: var(--lime-500);
  --accent-hover: var(--lime-600);
  --accent-soft: var(--lime-200);
  --focus-ring: var(--white);
  --focus-ring-inverse: var(--navy-700);

  /* --- Apoio categórico ----------------------------------------------------- */
  --support-1: var(--purple-500);
  --support-2: var(--orange-500);
  --signal-alert: #ED1651;   /* triângulo de alerta da Dor (escolha do Caio no Brilliant) */
  --wa-green: #25D366;         /* verde oficial do WhatsApp (marca de terceiro, só o botão flutuante) */
  --wa-green-hover: #1DA851;   /* hover do flutuante */


  /* ==========================================================================
     TIPOGRAFIA
     ========================================================================== */
  --font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-ui);   /* uma família só, peso faz a hierarquia */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;   /* H1 do hero */
  --weight-bold: 700;       /* botão, eyebrow, dado */

  /* Escala. O hero define display-1, lead, eyebrow e btn (medidos no Figma).
     Os degraus abaixo foram derivados para as próximas seções. */
  --size-display-1: 76px;   /* H1 do hero (aposentado na revisão 2026-09-08) */
  --size-display-hero: 60px; /* H1 do hero - pergunta longa do cliente precisa de 4 linhas */
  --size-display-2: clamp(2rem, 1.2rem + 2.2vw, 3rem);  /* H2: 48px no Figma Autoridade var 01 */
  --size-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --size-h4: 1.375rem;
  --size-lead: 22px;
  --size-body: 18px;
  --size-body-md: 20px;   /* texto das barras de alerta da Dor */
  --size-body-sm: 16px;
  --size-eyebrow: 16px;
  --size-caption: 14px;
  --size-micro: 12px;       /* meta do selo de prêmio */

  --leading-tight: 0.96;    /* display */
  --leading-snug: 1.15;
  --leading-normal: 1.58;   /* lead e corpo */
  --leading-relaxed: 1.7;

  --tracking-display: -0.04em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.18em;


  /* ==========================================================================
     ESPAÇO E MEDIDA
     ========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;    /* respiro entre blocos da coluna do hero */
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;

  --space-section: clamp(4rem, 3rem + 4vw, 7rem);  /* ritmo vertical de seção */
  --space-gutter: 24px;

  --stage: 1920px;           /* palco de referência do desenho */
  --container: 1198px;       /* coluna de conteúdo (1920 - 2x361) */
  --container-wide: 1298px;  /* card do ticker */
  --measure: 34ch;           /* medida ideal de leitura em display */
  --measure-body: 62ch;
  --measure-narrow: 40em;    /* lead da Autoridade (~720px a 18px) */


  /* ==========================================================================
     FORMA, ELEVAÇÃO, MOVIMENTO
     ========================================================================== */
  --radius-xs: 2px;      /* barra lima do selo */
  --radius-sm: 6px;      /* marca-texto */
  --radius-md: 12px;
  --radius-lg: 16px;     /* card do ticker */
  --radius-xl: 20px;
  --radius-pill: 999px;  /* todo botão */

  --shadow-sm: 0 1px 2px rgb(17 47 96 / 0.06), 0 2px 8px rgb(17 47 96 / 0.04);
  --shadow-lg: 0 12px 32px rgb(10 29 62 / 0.16);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --transition-base: var(--duration-base) var(--ease);
  --ticker-duration: 140s;   /* era 34s no recorte; cliente pediu bem mais lento (11/09) */

  --z-header: 20;
  --z-overlay: 30;


  /* ==========================================================================
     ÍCONES - Lucide, traço 1.75
     Sprite em assets/icon/lucide-sprite.svg. Cor vem de currentColor.
     ========================================================================== */
  --icon-stroke: 1.75;
  --icon-sm: 18px;
  --icon-md: 24px;   /* padrão: botão, item de lista */
  --icon-lg: 32px;   /* card de serviço, passo do método */


  /* ==========================================================================
     CAMADA 3 - MEDIDAS DE COMPONENTE
     ========================================================================== */
  --eyebrow-to-title: var(--space-5); /* 20px: Autoridade, Dor, Método, Mídia */
  --header-h: 96px;
  --hero-h: 851px;
  --hero-art-offset: 91px;   /* topo da arte dentro do frame de 1920 */
  --ticker-card-h: 100px;
  --ticker-item-w: 149.45px;
  --ticker-gap: 29.74px;
  /* Autoridade · "Quem está do outro lado" var 03
     (Brilliant 16166525566aa870, aprovada 2026-09-08).
     Aposenta a var 01: parede de logos clara, foto solta e lista
     vertical de provas saíram; tudo virou uma placa só. */
  --auth-h2-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.625rem); /* 42px no frame */
  --auth-h2-tracking: -0.02em;
  --auth-lead-w: 480px;              /* coluna direita do cabeçalho */
  --auth-lead-color: var(--slate-800);
  --auth-dossie-cols: minmax(0, 7fr) minmax(0, 5fr);  /* foto 700 · painel 500 */
  --auth-photo-ratio: 700 / 440;
  --auth-signal-h: 5px;              /* faixa lima no topo da placa */
  --auth-panel-pad: 48px 44px;
  --auth-cred-pad: 26px 40px;        /* régua navy do crachá */
  --auth-seal-bar-w: 4px;
  --auth-seal-bar-h: 42px;
  --auth-cred-logo-h: 30px;          /* Syngenta, BASF, Gestão RH */
  --auth-cred-logo-h-wide: 18px;     /* EY: lockup largo, altura menor por equilíbrio óptico */
  --auth-cred-logo-gap: 48px;
  --auth-proof-tracking: 1.5px;      /* numerais 01/02/03 da ficha */
  --solucao-anchor-tracking: -1px;  /* âncora 48px no Brilliant */
  --solucao-anchor-leading: 1.1;
  --solucao-index-leading: 1.5;     /* corpo dos cards de serviço */

  /* Sobre · var 01 (Brilliant 862918dfcb528355, aprovada 2026-09-08) */
  --sobre-photo-w: 420px;
  --sobre-photo-h: 490px;
  --sobre-gap: 72px;                /* retrato ↔ bio */
  --sobre-photo-ring: rgb(0 0 0 / 0.1);
  --sobre-h-leading: 1.1;
  --sobre-h-tracking: -2px;
  --sobre-graf-leading: 1.6;
  --sobre-pull-leading: 1.4;
  --sobre-rule-w: 64px;
  --sobre-rule-h: 1px;
  --sobre-year: var(--slate-400);   /* orelhas da trilha; Hoje usa --text-primary */
  --sobre-year-tracking: 2px;
  --sobre-year-lh: 19px;
  --sobre-dot: 14px;
  --sobre-track-h: 2px;
  --sobre-stop-leading: 1.5;
  --sobre-stamp-w: 96px;            /* selo do prêmio, agora ao lado do CTA da bio */

  /* Mídia · var 04 (Brilliant, aprovada 2026-09-08) */
  --midia-gap: var(--space-6);  /* entre cards e entre as duas fileiras */
  --midia-logo-press-h: 26px;   /* Correio no card branco */
  --midia-logo-grh-h: 30px;     /* Gestão RH dentro do chip branco */
  --midia-logo-video-h: 22px;   /* YouTube nos cards de vídeo */
  --midia-logo-ifood-h: 32px;   /* iFood nos cards de conversa */

  /* FAQ · var 01 (Brilliant 4a48c4e2467d7ced) */
  --faq-side-w: 400px;
  --faq-gap: 72px;
  --faq-toggle-size: 40px;
  --faq-toggle-icon: 20px;
  --faq-toggle-stroke: 2px;
  --faq-cta-btn-py: 14px;
  --faq-h-leading: 1.1;
  --faq-h-tracking: -2px;
  --faq-answer-leading: 1.6;
  --faq-rule: rgb(17 47 96 / 0.10);

  /* CTA final - var 01 + Rodape - var 02 (Brilliant, aprovadas 2026-09-09) */
  --cta-btn-pad: 20px 44px;     /* botao do pico de conversao, maior que o padrao */
  --footer-bg: var(--navy-950); /* faixa profunda que ancora o fim da pagina */
  --footer-rule: rgb(255 255 255 / 0.24);  /* divisoria sutil sobre o navy */
  --footer-icon: 44px;          /* circulos sociais do rodape */
}

@media (prefers-reduced-motion: reduce) {
  /* Encurtar a duracao sozinho quebra o que repete: uma animacao "infinite"
     passa a rodar o ciclo inteiro a cada 0,01ms e vira um borrao — foi o que
     acontecia com o carrossel de logos. Limitar a uma repeticao e o que faz
     a animacao de fato terminar. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* O carrossel continua rodando tambem neste modo, por escolha do cliente.
     O que o reset acima faria com ele (0,01ms e uma repeticao) e desfeito
     aqui: volta a duracao cheia, que ja e lenta, e o loop infinito. */
  .ticker-track {
    animation-duration: var(--ticker-duration) !important;
    animation-iteration-count: infinite !important;
  }
}