/* Squad22 · tokens de design
   Paleta, cores de uso e tipografia vêm das tabelas da marca.
   Primitivos (marca/neutro) só são usados aqui; o resto do CSS usa as cores de uso. */

:root {
  /* ---------- paleta: marca ---------- */
  --marca-turquesa: #00ffec;
  --marca-rosa: #ff355e;
  --marca-turquesa-profundo: #005751;
  --marca-turquesa-medio: #00776e;

  /* ---------- paleta: neutro ---------- */
  --neutro-noturno: #010310;
  --neutro-carvao: #0a0c0d;
  --neutro-azul-profundo: #121f36;
  --neutro-grafite: #232322;
  --neutro-tinta: #121212;
  --neutro-ardosia: #455457;
  --neutro-cinza-medio: #677e82;
  --neutro-cinza-claro: #d8d8d8;
  --neutro-nevoa: #eaeaea;
  --neutro-papel: #f4f4f4;
  --neutro-branco-suave: #fafafa;
  --neutro-branco: #ffffff;

  /* ---------- cores de uso ---------- */
  --fundo-principal: var(--neutro-noturno);
  --fundo-secundario: var(--neutro-carvao);
  --fundo-cartao: var(--neutro-azul-profundo);
  --fundo-claro: var(--neutro-branco-suave);
  --fundo-suave: var(--neutro-papel);

  --destaque-turquesa: var(--marca-turquesa);
  --destaque-rosa: var(--marca-rosa);

  --texto-sobre-escuro: var(--neutro-branco-suave);
  --texto-apoio-sobre-escuro: var(--neutro-nevoa);
  --texto-sobre-claro: var(--neutro-noturno);
  --texto-apoio-sobre-claro: var(--neutro-ardosia);
  --texto-sobre-destaque: var(--neutro-tinta);
  --texto-destaque-sobre-claro: var(--marca-turquesa-medio);

  --borda-sobre-claro: var(--neutro-cinza-claro);
  --borda-sobre-escuro: var(--neutro-ardosia);
  --borda-destaque-sobre-claro: var(--marca-turquesa-medio);

  /* ---------- tema ----------
     Os componentes usam só estes papéis. O valor padrão é o dark;
     os blocos no fim do arquivo trocam os valores para o light. */
  color-scheme: dark;
  --tema-fundo: var(--fundo-principal);
  --tema-fundo-header: var(--fundo-secundario);
  --tema-header-linha: transparent;
  --tema-texto: var(--texto-sobre-escuro);
  --tema-texto-apoio: var(--destaque-turquesa);           /* texto de apoio usa a cor de destaque do tema */
  --tema-borda: var(--borda-sobre-escuro);
  --tema-destaque: var(--destaque-turquesa);              /* áreas grandes: faixa do hover, menu aberto */
  --tema-destaque-texto: var(--destaque-turquesa);        /* texto, ícones e símbolo pequeno */
  --tema-destaque-forma: var(--destaque-turquesa);        /* formas pequenas, como o botão de rolagem */
  --tema-sobre-destaque-forma: var(--texto-sobre-destaque);
  --cartao-fundo: var(--fundo-claro);                     /* a seção que sobe sobre o hero inverte o tema */
  --cartao-texto: var(--texto-sobre-claro);
  --cartao-apoio: var(--texto-apoio-sobre-claro);
  --cartao-foco: var(--borda-destaque-sobre-claro);
  --cartao-borda: var(--borda-sobre-claro);
  --tema-placeholder: var(--fundo-cartao);               /* espaço de imagem ainda sem imagem */
  --logo-word: var(--texto-sobre-escuro);
  --logo-accent: var(--destaque-turquesa);
  --focus-ring: var(--destaque-turquesa);
  --icone-sol: 1;
  --icone-lua: 0;

  /* ---------- tipografia ---------- */
  --fonte-titulo: "Poligrapher Grotesk", "Montserrat", system-ui, sans-serif;
  --fonte-h1: "Poligrapher Grotesk", "Montserrat", system-ui, sans-serif;
  --fonte-corpo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-numero: "Montserrat", system-ui, sans-serif;

  --peso-titulo: 700;
  --peso-titulo-leve: 700;
  --peso-corpo: 600;
  --peso-corpo-medio: 600;
  --peso-corpo-forte: 700;
  --peso-numero: 800;

  /* tamanhos: a tabela da marca está na escala de post (1080 px).
     Títulos, números e frase vão de metade do valor (375 px) ao valor cheio (1440 px).
     Corpo, rodapé e rótulo usam metade do valor, fixo. */
  --fs-display: clamp(52px, 33.69px + 4.883vw, 104px); /* 104 */
  --fs-titulo-g: clamp(42px, 27.21px + 3.944vw, 84px); /* 84 */
  --fs-titulo-m: clamp(36px, 23.32px + 3.380vw, 72px); /* 72 */
  --fs-titulo-p: clamp(28px, 18.14px + 2.629vw, 56px); /* 56 */
  --fs-numero-xg: clamp(130px, 84.23px + 12.207vw, 260px); /* 260 */
  --fs-numero-g: clamp(100px, 64.79px + 9.390vw, 200px); /* 200 */
  --fs-numero-m: clamp(80px, 51.83px + 7.512vw, 160px); /* 160 */
  --fs-frase: clamp(26px, 16.85px + 2.441vw, 52px); /* 52 */
  --fs-corpo-g: 1.25rem; /* 40 */
  --fs-corpo-m: 1.125rem; /* 36 */
  --fs-corpo-p: 1rem; /* 32 */
  --fs-rodape: 0.875rem; /* 28 */
  --fs-rotulo: 0.8125rem; /* 26 */

  --lh-titulo: 0.95;
  --lh-frase: 1.1;
  --lh-corpo: 1.5;
  --tracking-titulo: -0.02em;

  /* ---------- espaço ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: clamp(16px, 2.6vw, 40px);
  --header-altura: 80px;
  /* grade da página: duas linhas verticais de cada lado.
     --gutter é a margem do header; --margem-conteudo é a do conteúdo (menu do hero, títulos,
     painéis), mais para dentro. O recuo é a distância entre as duas. */
  --recuo: clamp(0px, 6.1vw, 136px);
  --margem-conteudo: calc(var(--gutter) + var(--recuo));
  --tela-altura: 100vh; /* vira 100svh onde o navegador suporta (fim do arquivo) */

  /* ---------- forma ---------- */
  --radius-card: clamp(20px, 2.4vw, 36px);
  --radius-chip: 10px;
  --radius-pill: 999px;
  --card-inset: clamp(8px, 0.9vw, 14px);
  --menu-icone: 18px;
  --scroll-cue-tamanho: 56px;
  --manifesto-pista: 300vh; /* altura da pista de rolagem do manifesto */
  --manifesto-entrada: 0.85; /* ponto da tela (0 = topo, 1 = base) em que o título dispara a revelação */

  /* ---------- páginas de case ---------- */
  --fs-case-titulo: clamp(56px, 10vw, 180px);
  --fs-case-texto: clamp(1.125rem, 0.95rem + 0.7vw, 1.625rem);
  --fs-case-numero: clamp(64px, 8vw, 128px);
  --case-vao: clamp(96px, 16vh, 200px);           /* espaço entre os blocos da página */
  --case-bloco-largura: min(36rem, 44%);          /* largura de um bloco de texto */
  --bandeira-altura: 0.5em;                       /* bandeira ao lado do nome do projeto: um pouco menor que as maiúsculas */
  --bandeira-subida: 0.08em;                      /* sobe da linha de base para centrar nas maiúsculas */
  --bandeira-vao: 0.3em;
  --bandeira-raio: 0.1em;
  --bandeira-borda: rgb(0 0 0 / 0.18);
  --case-ponto: 14px;                             /* marcador redondo ao lado de cada bloco */
  --case-galeria-vao: var(--space-4);             /* espaço entre imagens seguidas */
  --proximo-altura: 82vh;                         /* cartão de próximo projeto: o seguinte já aparece embaixo */
  --mais-altura: 56vh;                            /* cartão final, "todos os trabalhos" */
  --contato-altura: 72vh;                         /* cartão de contato, no fim das páginas de serviço */
  --lista-altura: 64vh;                           /* cartões de lista das páginas de serviço (trabalhos e outras frentes) */
  --servico-pagina-colunas: minmax(0, 0.3fr) minmax(0, 1fr); /* página de serviço: número à esquerda, texto à direita */
  --servico-pagina-texto: 46rem;                  /* largura máxima dos parágrafos, para a linha não ficar longa */
  --metodo-no: 13px;                              /* marcador de cada passo, em cima da linha */
  --metodo-desvio: 32px;                          /* os passos sobem esta distância ao aparecer */
  --metodo-passo-dur: 0.7s;
  --metodo-linha-dur: 1.2s;                       /* tempo de a linha cruzar os quatro passos */
  --metodo-atraso: 0.1s;                          /* intervalo entre a entrada de um passo e a do seguinte */
  --fs-metodo-numero: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  --fs-metodo-passo: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --rodape-link-opacidade: 0.72;                  /* links do rodapé em repouso; cheios no hover e no foco */
  --rodape-dur: 0.4s;
  --planos-colunas: 4;                            /* planos lado a lado no desktop */
  --fs-plano-nome: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --fs-plano-valor: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  /* quanto cada peça começa menor antes de crescer com a rolagem (1 = tamanho final) */
  --case-capa-escala: 0.82;
  --case-intro-escala: 0.62;
  --case-midia-escala: 0.9;

  /* ---------- painéis de trabalho ---------- */
  --painel-raio: 16px;
  --paineis-vao: 0.6rem;
  --paineis-altura: min(30rem, 62vh);
  --painel-fechado-celular: 4.6rem;
  --painel-aberto-celular: 17rem;
  --painel-fundo: var(--fundo-cartao);          /* aparece antes de a imagem carregar */
  --painel-texto: var(--texto-sobre-escuro);    /* a legenda fica sempre sobre o véu escuro */
  --painel-veu-rgb: 1 3 16;                     /* noturno, para o degradê atrás da legenda */
  --espia-raio: var(--painel-raio);
  --servico-num-coluna: 3.25rem;                  /* coluna do número de cada frente */
  --servico-num-opacidade: 0.4;                   /* o número é decorativo e fica discreto até o hover */
  --servico-texto-opacidade: 0.72;                /* a descrição é conteúdo: mais forte que no gem (0,5), pelo contraste */
  --painel-selo: 40px;                          /* selo redondo com seta no painel que leva a um case */

  /* ---------- movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-med: 450ms;
  --dur-slow: 900ms;
  --parallax-rate: 0.25;
  /* rolagem das âncoras: duração = base + distância × por-px, até o máximo (em ms) */
  --rolagem-dur-base: 600;
  --rolagem-dur-por-px: 0.85;
  --rolagem-dur-max: 2800;
  --dur-menu: 700ms;
  --ease-menu: cubic-bezier(0.76, 0, 0.24, 1);
  --menu-hover-escala: 1.15;
  /* entrada do menu do hero: cada item desliza da esquerda, um depois do outro */
  --entrada-menu-desvio: 56px;
  --entrada-menu-dur: 1100ms;
  --entrada-menu-intervalo: 150ms;
  --entrada-menu-ease: cubic-bezier(0.33, 1, 0.68, 1);
  /* painéis de trabalho: valores do gem "Expanding Image Panels" (BYQ). Não alterar. */
  --painel-crescimento: 5.2;
  --painel-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --painel-dur: 0.7s;
  --painel-dur-zoom: 0.9s;
  --painel-dur-veu: 0.6s;
  --painel-dur-legenda: 0.5s;
  --painel-dur-legenda-sobe: 0.6s;
  --painel-atraso-legenda: 0.08s;
  --painel-dur-numero: 0.4s;
  --painel-legenda-desvio: 14px;

  /* serviços: valores do gem "Hover Peek List" (BYQ). Não alterar. */
  --espia-largura: 15.5rem;                       /* moldura da imagem que segue o cursor */
  --espia-proporcao: 11 / 14;
  --espia-escala-inicial: 0.9;                    /* a moldura aparece crescendo de 0,9 para 1 */
  --espia-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --espia-dur-opacidade: 0.45s;
  --espia-dur-transform: 0.5s;
  --espia-img-dur-opacidade: 0.5s;                /* troca de imagem entre uma frente e outra */
  --espia-img-dur-escala: 0.9s;
  --espia-img-escala: 1.08;
  --espia-atraso: 0.16;                           /* quanto a moldura se aproxima do cursor a cada quadro */
  --espia-inclina-fator: 0.6;                     /* inclinação por velocidade horizontal... */
  --espia-inclina-max: 8;                         /* ...limitada a 8 graus para cada lado */
  --servico-dur-cor: 0.4s;
  --servico-dur-nome: 0.5s;
  --servico-dur-sublinhado: 0.55s;
  --servico-nome-desvio: 0.9rem;                  /* o nome desliza para a direita no hover */
  --servico-seta-desvio: 0.35rem;                 /* a seta do link anda para a direita no hover */
  --servico-apagado: 42%;                         /* as outras frentes apagam enquanto uma está em foco */

  /* ---------- logo do header ---------- */
  --header-marca-largura: 40px;                   /* largura do '22 dentro do logo */
  /* o logo completo mantém o '22 desse tamanho: 3270,02 e 1018 são as larguras dos dois desenhos */
  --header-logo-largura: calc(var(--header-marca-largura) * 3270.02 / 1018);

  /* ---------- logo do hero ---------- */
  --logo-proporcao: 0.2981; /* altura / largura do logo */
  --logo-corte: 0.24;       /* fração da altura do logo cortada na base */
  --logo-ombro: 0.337;      /* fração da altura do logo que fica vazia acima da palavra "squad" */

  /* ---------- menu grande do hero ----------
     O menu fica ancorado logo acima da palavra "squad", a uma distância fixa (--hero-menu-vao).
     A fonte cresce com a largura da tela, até o limite em que os quatro itens ainda cabem
     entre o header e o logo. */
  --hero-menu-vao: 4.5vw;
  --hero-menu-linha: 1.01;  /* altura de cada item em relação à fonte (entrelinha + respiro) */
  --hero-menu-espaco: calc(
    var(--tela-altura) - var(--header-altura) - var(--space-5) - var(--hero-menu-vao)
    - 100vw * var(--logo-proporcao) * (1 - var(--logo-corte) - var(--logo-ombro))
  );
  --fs-menu-hero: clamp(40px, min(7vw, var(--hero-menu-espaco) / (4 * var(--hero-menu-linha))), 160px);

  /* ---------- camadas ---------- */
  --z-content: 2;
  --z-fixed: 50;
  --z-overlay: 100;
}

/* abaixo de 960px o conteúdo encosta na margem da página, sem recuo extra,
   e o menu do hero volta para o topo, com a fonte seguindo só a largura */
@media (max-width: 960px) {
  :root {
    --recuo: 0px;
    --fs-menu-hero: clamp(40px, 9vw, 72px);
  }
}

@supports (height: 100svh) {
  :root { --tela-altura: 100svh; }
}

/* ---------- tema light ----------
   No light o destaque é o rosa: ele entra no lugar do turquesa (logo, faixa do hover,
   menu aberto, ícones) e também no lugar da ardósia no texto de apoio.
   1) sem escolha salva, segue o tema do aparelho; 2) com escolha salva, vale o data-tema. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="dark"]) {
    color-scheme: light;
    --tema-fundo: var(--fundo-claro);
    --tema-fundo-header: var(--fundo-suave);
    --tema-header-linha: var(--borda-sobre-claro);
    --tema-texto: var(--texto-sobre-claro);
    --tema-texto-apoio: var(--destaque-rosa);
    --tema-borda: var(--borda-sobre-claro);
    --tema-destaque: var(--destaque-rosa);
    --tema-destaque-texto: var(--destaque-rosa);
    --tema-destaque-forma: var(--destaque-rosa);
    --tema-sobre-destaque-forma: var(--texto-sobre-destaque);
    --cartao-fundo: var(--fundo-principal);
    --cartao-texto: var(--texto-sobre-escuro);
    --cartao-apoio: var(--texto-apoio-sobre-escuro);
    --cartao-foco: var(--destaque-rosa);
    --cartao-borda: var(--borda-sobre-escuro);
    --tema-placeholder: var(--neutro-nevoa);
    --logo-word: var(--texto-sobre-claro);
    --logo-accent: var(--destaque-rosa);
    --focus-ring: var(--destaque-rosa);
    --icone-sol: 0;
    --icone-lua: 1;
  }
}
:root[data-tema="light"] {
    color-scheme: light;
    --tema-fundo: var(--fundo-claro);
    --tema-fundo-header: var(--fundo-suave);
    --tema-header-linha: var(--borda-sobre-claro);
    --tema-texto: var(--texto-sobre-claro);
    --tema-texto-apoio: var(--destaque-rosa);
    --tema-borda: var(--borda-sobre-claro);
    --tema-destaque: var(--destaque-rosa);
    --tema-destaque-texto: var(--destaque-rosa);
    --tema-destaque-forma: var(--destaque-rosa);
    --tema-sobre-destaque-forma: var(--texto-sobre-destaque);
    --cartao-fundo: var(--fundo-principal);
    --cartao-texto: var(--texto-sobre-escuro);
    --cartao-apoio: var(--texto-apoio-sobre-escuro);
    --cartao-foco: var(--destaque-rosa);
    --cartao-borda: var(--borda-sobre-escuro);
    --tema-placeholder: var(--neutro-nevoa);
    --logo-word: var(--texto-sobre-claro);
    --logo-accent: var(--destaque-rosa);
    --focus-ring: var(--destaque-rosa);
    --icone-sol: 0;
    --icone-lua: 1;
}