/*
  vagas-reconecta :: 00-tokens.css
  Design tokens (custom properties) do sistema de paginas de candidatura.

  Visual: neutro corporativo de carreiras (decisao do Leo).
  NAO e o teal do InHire, NAO e landing de venda. Sobrio e profissional.
  Uma unica cor de acento (azul corporativo neutro). Sem vermelho Reconecta, sem teal.
*/

:root {
  /* ============ COR: fundos ============ */
  --cor-fundo:            #ffffff;   /* fundo principal branco */
  --cor-fundo-alt:        #f5f6f8;   /* secoes alternadas, cinza muito claro */
  --cor-superficie:       #ffffff;   /* cards */

  /* ============ COR: texto ============ */
  --cor-titulo:           #1a1d21;   /* titulos */
  --cor-corpo:            #4a4f57;   /* corpo de texto */
  --cor-secundario:       #8a9099;   /* metadados, legendas, texto secundario */

  /* ============ COR: acento (azul corporativo neutro) ============ */
  --cor-acento:           #2563a8;   /* links, botoes, badges */
  --cor-acento-hover:     #1e5090;   /* hover do acento */
  --cor-acento-suave:     #eaf1f9;   /* fundo de badge/destaque bem claro */
  --cor-acento-contraste: #ffffff;   /* texto sobre acento */

  /* ============ COR: bordas e feedback ============ */
  --cor-borda:            #e4e7ec;   /* bordas de cards e divisores */
  --cor-borda-forte:      #cdd2da;   /* bordas em foco/hover de input */
  --cor-erro:             #c0392b;   /* mensagens de erro */
  --cor-sucesso:          #2f855a;   /* confirmacao */

  /* ============ SOMBRA ============ */
  --sombra-card:          0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06);
  --sombra-card-hover:    0 4px 12px rgb(16 24 40 / 0.08);
  --sombra-modal:         0 20px 48px rgb(16 24 40 / 0.18), 0 4px 12px rgb(16 24 40 / 0.10);
  --sombra-foco:          0 0 0 3px rgb(37 99 168 / 0.22);

  /* ============ TIPOGRAFIA ============ */
  --fonte-sans:           "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --peso-normal:          400;
  --peso-medio:           500;
  --peso-semibold:        600;
  --peso-bold:            700;

  /* escala tipografica fluida */
  --texto-xs:             0.8125rem;  /* 13px */
  --texto-sm:             0.9375rem;  /* 15px */
  --texto-base:           1rem;       /* 16px */
  --texto-lg:             1.125rem;   /* 18px */
  --texto-xl:             1.375rem;   /* 22px */
  --texto-2xl:            clamp(1.5rem, 3.2vw, 1.875rem);   /* titulo de secao */
  --texto-3xl:            clamp(1.875rem, 4.5vw, 2.5rem);   /* titulo hero */

  --lh-apertado:          1.2;
  --lh-normal:            1.5;
  --lh-relaxado:          1.65;

  /* ============ ESPACAMENTO ============ */
  --esp-1:                0.25rem;   /* 4px */
  --esp-2:                0.5rem;    /* 8px */
  --esp-3:                0.75rem;   /* 12px */
  --esp-4:                1rem;      /* 16px */
  --esp-5:                1.5rem;    /* 24px */
  --esp-6:                2rem;      /* 32px */
  --esp-7:                2.5rem;    /* 40px */
  --esp-8:                3.5rem;    /* 56px */
  --esp-9:                5rem;      /* 80px */

  /* ============ LAYOUT ============ */
  --container-max:        1200px;
  --container-pad:        clamp(1.25rem, 4vw, 3rem);
  --coluna-form:          380px;     /* largura da coluna do card do form */

  /* ============ RAIO ============ */
  --raio-sm:              6px;
  --raio-md:              10px;
  --raio-lg:              12px;
  --raio-pill:            999px;

  /* ============ TRANSICAO ============ */
  --transicao-rapida:     150ms ease;
  --transicao-media:      250ms ease;

  /* ============ CAMADAS (z-index) ============ */
  --z-header:             40;
  --z-barra-mobile:       50;
  --z-modal:              1000;
}