/* -----------------------------------------------------------------------------
   Tokens do design system Intellevo
   Manual de marca v2.0

   Toda cor, tamanho e espaçamento do site sai daqui. Nenhum valor cru de cor
   deve aparecer em outro arquivo: quando a marca já teve quatro verdes
   diferentes em circulação, foi exatamente por falta de um lugar único onde a
   cor é definida.
   ----------------------------------------------------------------------------- */

:root {
  /* --- Paleta ------------------------------------------------------------
     As cinco cores do manual. Todas ativas; o neon é a principal, não a única. */

  /* Cor de destaque e cor de fundo vêm do painel (Site > Aparência): head.php
     escreve as quatro variáveis abaixo com o valor escolhido. Estes são os
     padrões do manual, usados se o painel não disser nada (30/09/2026). */
  --cor-destaque:     #00FF88;
  --cor-destaque-rgb: 0 255 136;
  --cor-fundo:        #212427;
  --cor-fundo-rgb:    33 36 39;

  --intell-green: var(--cor-destaque);
  --evo-green:    #03733D;
  --light-green:  #66A687;
  --cinza:        #B2B5C0;
  --preto:        var(--cor-fundo);
  --branco:       #FFFFFF;

  /* Variações de superfície derivadas do preto institucional, para separar
     blocos sem introduzir cor nova na marca. */
  --preto-elevado: #2A2E31;
  --preto-borda:   #3A3F43;

  /* --- Papéis semânticos -------------------------------------------------
     Os componentes usam estes, nunca a paleta direta. Trocar o papel muda o
     site inteiro de forma coerente. */

  --fundo:            var(--preto);
  --fundo-elevado:    var(--preto-elevado);
  --texto:            var(--branco);
  --texto-suave:      var(--cinza);
  --destaque:         var(--intell-green);
  --borda:            var(--preto-borda);

  /* Sobre fundo claro o neon reprova em contraste (1,34:1 contra branco).
     Link e destaque em fundo claro usam Evo Green, que passa com 5,96:1. */
  --texto-sobre-claro:    var(--preto);
  --destaque-sobre-claro: var(--evo-green);

  /* --- Gradientes --------------------------------------------------------
     Apenas os quatro autorizados pelo manual. Nenhum outro. */

  --grad-intell-light: linear-gradient(135deg, var(--intell-green), var(--light-green));
  --grad-intell-evo:   linear-gradient(135deg, var(--intell-green), var(--evo-green));
  --grad-evo-light:    linear-gradient(135deg, var(--evo-green), var(--light-green));
  --grad-cinza-preto:  linear-gradient(135deg, var(--cinza), var(--preto));

  /* --- Tipografia --------------------------------------------------------
     Big Shoulders Display nos títulos, sempre em caixa alta.
     Plus Jakarta Sans no texto. Nenhuma das duas tem itálico desenhado. */

  --fonte-titulo: 'Big Shoulders Display', 'Big Shoulders Reserva', 'Arial Narrow', sans-serif;
  --fonte-texto:  'Plus Jakarta Sans', 'Plus Jakarta Reserva', system-ui, -apple-system, sans-serif;

  /* Escala fluida. O clamp evita ter que escrever media query para cada
     tamanho: o valor cresce com a largura da tela entre os dois extremos. */
  --t-display: clamp(3rem, 8vw, 6.5rem);
  --t-h1:      clamp(2.5rem, 6vw, 4.5rem);
  --t-h2:      clamp(1.875rem, 4vw, 3rem);
  --t-h3:      clamp(1.5rem, 2.5vw, 2rem);
  --t-h4:      clamp(1.25rem, 2vw, 1.5rem);
  --t-corpo-g: 1.125rem;
  --t-corpo:   1rem;
  --t-miudo:   0.875rem;
  --t-micro:   0.75rem;

  /* Título condensado em caixa alta pede entrelinha curta e um pouco de
     espaçamento entre letras; texto corrido pede o contrário. */
  --entrelinha-titulo: 0.95;
  --entrelinha-texto:  1.65;
  --letra-titulo:      0.02em;

  --peso-leve:   300;
  --peso-normal: 400;
  --peso-medio:  600;
  --peso-forte:  700;
  --peso-preto:  900;

  /* --- Espaçamento -------------------------------------------------------
     Escala em progressão, para que o espaço entre elementos seja decisão de
     escala e não de gosto. */

  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-10: 8rem;

  --secao-y: clamp(4rem, 10vw, 8rem);

  /* --- Medidas -----------------------------------------------------------  */

  --largura-max:   1280px;
  --largura-texto: 68ch;
  --gutter:        clamp(1rem, 5vw, 3rem);

  --raio:    4px;
  --raio-g:  12px;

  /* --- Movimento ---------------------------------------------------------
     Duração e curva vêm daqui para que a animação do site tenha assinatura
     própria em vez de cada trecho inventar a sua. */

  --duracao-rapida: 150ms;
  --duracao-media:  300ms;
  --duracao-lenta:  600ms;
  --curva:          cubic-bezier(0.22, 1, 0.36, 1);

  --z-menu:  100;
  --z-modal: 200;
}

/* Bloco em fundo claro. Aplicar a classe inverte os papéis semânticos e o
   restante do CSS continua funcionando sem saber em que fundo está. */
.claro {
  --fundo:         var(--branco);
  --fundo-elevado: #F4F6F5;
  --texto:         var(--preto);
  --texto-suave:   #5A6066;
  --destaque:      var(--evo-green);
  --borda:         #DCE0E2;
}