/* ============================================================
   POLUX — TOKENS DE DESIGN
   Fonte única de cor, tipografia, espaço, raio, sombra e motion.
   Qualquer página nova importa este arquivo e não redefine nada aqui dentro.
   Documentação e razão de cada escolha: DESIGN.md
   ============================================================ */

:root{

  /* ---------- COR DA MARCA ----------
     Extraídas por amostragem de pixels de brand/logo_original_4por3.jpeg.
     Não estimadas a olho. Ver docs/brand-assets.md */
  --grafite:#282B32;        /* wordmark POLUX · contraste 14,2:1 no branco */
  --cinza:#525252;          /* linha "CONSULTORIA EMPRESARIAL" · 7,8:1 */
  --azul:#58B0DD;           /* traço do X · 2,4:1 — NÃO usar em texto */

  /* ---------- COR DERIVADA ---------- */
  --azulT:#0F5C7A;          /* azul de TEXTO e link · 7,4:1 · resolve o azul da marca */
  --azulC:#2E86B8;          /* azul intermediário, uso pontual */
  --grafite2:#1C1F25;       /* fundo das seções escuras */
  --cinza2:#686F79;         /* texto de apoio, rótulos · 5,1:1 no branco, 4,6:1 no papel-alt
                               Era #7A818B, que dava 3,9:1 e reprovava em AA para texto
                               normal. Escurecido na auditoria da Fase 7, mesmo tom. */

  /* ---------- SUPERFÍCIE ---------- */
  --papel:#FBFCFD;          /* fundo padrão da página */
  --papel-alt:#F2F5F7;      /* fundo de seção alternada */
  --card:#FFFFFF;
  --linha:#E4E7EB;          /* borda e divisor sobre claro */
  --linhaD:#3A3F48;         /* borda e divisor sobre escuro */

  /* ---------- ESTADO ----------
     Par claro/escuro: o segundo é para uso sobre --grafite2 */
  --verde:#0E7C5A;      --verde-esc:#4ADE9B;
  --vermelho:#B3261E;   --vermelho-esc:#FF7A72;
  --laranja:#9C5A00;    --laranja-esc:#F0B45E;

  /* ---------- TIPOGRAFIA ----------
     Fontes do sistema por enquanto. A família definitiva entra quando
     for licenciada/escolhida; trocar aqui troca o site inteiro. */
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --txt-xs:11.5px;      /* eyebrow, rótulo em caixa alta */
  --txt-sm:13.5px;      /* apoio, legenda */
  --txt-base:15.5px;    /* corpo padrão */
  --txt-md:17px;        /* lead de seção */
  --txt-lg:20px;        /* lead de destaque */

  --h3:20px;
  --h2:clamp(26px,3.6vw,42px);
  --h1:clamp(38px,6.2vw,72px);

  --tracking-eyebrow:.17em;
  --tracking-titulo:-.028em;
  --altura-titulo:1.1;
  --altura-corpo:1.55;

  /* ---------- ESPAÇO ----------
     Escala de 4px. Usar os degraus, não valores soltos. */
  --e1:4px;  --e2:8px;  --e3:12px; --e4:16px; --e5:20px;
  --e6:24px; --e8:32px; --e10:40px; --e12:48px; --e16:64px;
  --secao:78px;             /* padding vertical de seção */
  --container:1120px;       /* largura máxima de conteúdo */
  --medida:66ch;            /* largura máxima de texto corrido */

  /* ---------- RAIO ---------- */
  --raio-sm:8px;            /* botão, campo de formulário */
  --raio:12px;              /* card, painel */
  --raio-pill:999px;        /* selo, chip */

  /* ---------- SOMBRA ----------
     Tingidas com o grafite da marca, nunca preto puro. */
  --sombra-card:0 1px 2px rgba(40,43,50,.04), 0 12px 30px rgba(40,43,50,.05);
  --sombra-alta:0 2px 4px rgba(40,43,50,.05), 0 18px 46px rgba(40,43,50,.10);
  --sombra-hover:0 8px 22px rgba(40,43,50,.07);

  /* ---------- MOTION ----------
     Quatro degraus, não catorze. Ver docs/motion-principles.md */
  --t:cubic-bezier(.16,1,.3,1);   /* easing único do projeto */
  --dur-rapida:220ms;   /* feedback imediato: hover, foco, troca de cor */
  --dur:450ms;          /* transição padrão de estado */
  --dur-lenta:620ms;    /* mudança de layout: FLIP, abrir painel */
  --dur-cena:1100ms;    /* narrativa: barras crescendo, número assentando */

  /* ---------- CAMADA ---------- */
  --z-fundo:0;
  --z-conteudo:1;
  --z-nav:50;
  --z-sobreposto:100;
}

/* ---------- BREAKPOINTS ----------
   Não existem como custom property (media query não lê var).
   Três, e só três, por convenção do projeto:
     640px  — abaixo disso, coluna única
     900px  — abaixo disso, grades de 2+ colunas viram uma
     1120px — largura do container, não é breakpoint de layout
   Ver DESIGN.md para a dívida atual do protótipo. */

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* A barra de navegação é sticky. Sem esta folga, todo link de âncora (#metodo,
   #contato) para com o topo da seção escondido atrás dela, e o foco de teclado
   também (WCAG 2.2, 2.4.11). 88px = altura da barra + respiro.
   Em telas pequenas a barra tem duas linhas — override em site.css. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--papel);color:var(--grafite);font-family:var(--fonte);
  line-height:var(--altura-corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{letter-spacing:var(--tracking-titulo);line-height:var(--altura-titulo)}
a{color:var(--azulT)}
.num{font-variant-numeric:tabular-nums}

/* Acessibilidade: nenhuma animação é essencial para entender o conteúdo.
   Toda seção narrativa entrega o estado final direto quando isto está ligado. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}