/* =============================================================
   VagaCidade — base
   Elementos nus: html/body, tipografia, foco, seleção, scrollbar.
   ============================================================= */

@layer base {

  /* Fundo das paginas.

     A arte fica no ELEMENTO RAIZ, e nao numa camada dentro do body.

     A versao anterior usava `body::before` fixo com `z-index: -1`. Isso
     funcionava isolado e falhava no aplicativo — e a razao estava tres linhas
     acima, aqui mesmo: o html ja tinha fundo opaco proprio e `overflow-x: clip`.
     Fundo no html impede o fundo do body de virar o fundo da tela, e o recorte
     alcanca ate elemento de posicao fixa. A camada existia, com a imagem certa,
     e simplesmente nunca era vista.

     O fundo do elemento raiz e a unica superficie que o navegador garante que
     cobre a tela inteira: nao entra na ordem de empilhamento dos descendentes e
     ninguem consegue recorta-la. `background-attachment: fixed` mantem a arte
     parada na rolagem, sem custar uma camada a mais. */
  html {
    color-scheme: dark;

    background-color: var(--surface-canvas);
    background-image: var(--surface-atmosphere);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    /* Nenhuma tela rola para o lado. `clip` em vez de `hidden` porque
       `hidden` transformaria o html em contêiner de rolagem e quebraria
       todo `position: sticky` (a barra do topo e a doca de ações). */
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
  }

  body {
    min-height: 100svh;
    margin: 0;
    color: var(--text-default);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* O body fica transparente: fundo opaco aqui cobriria a arte da raiz. */
  body {
    background-color: transparent;
  }

  /* Imagens nao se arrastam, nao se seguram e nao se selecionam.

     Vale para toda imagem do sistema: foto de perfil, imagem de vaga, marca.
     Sao os tres caminhos por onde uma imagem sai da tela sem esforco — arrastar
     para outra janela, segurar o dedo (que abre "salvar imagem" no celular) e
     selecionar junto com o texto.

     Ser honesto sobre o alcance: isto e um freio, nao um cadeado. Quem abrir as
     ferramentas do navegador ou o endereco da imagem direto continua baixando —
     o navegador precisa receber os bytes para desenhar a imagem, e nao existe
     jeito de entregar a imagem e nao entregar o arquivo. O que se evita aqui e o
     caminho facil, que e por onde a copia acontece na pratica.

     `pointer-events` fica de fora de proposito: ha imagem dentro de link e de
     botao (a foto do perfil, o cartao da vaga), e desligar o ponteiro quebraria
     o toque nelas. */
  img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--text-strong);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
  }

  h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
  h2 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
  h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

  strong, b {
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
  }

  a {
    color: var(--text-link);
  }

  a:hover {
    color: var(--palette-blue-200);
  }

  /* R7 — anel de foco visível apenas para navegação por teclado,
     mas SEMPRE presente quando ela acontece. */
  :focus-visible {
    outline: 2px solid var(--palette-blue-300);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  ::selection {
    background-color: var(--accent-fill);
    color: var(--text-on-accent);
  }

  ::placeholder {
    color: var(--text-subtle);
    opacity: 1;
  }

  /* Scrollbar discreta e consistente entre navegadores */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-pill);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
  }

  /* Conteúdo escrito por gente real tem link colado, palavra gigante e
     endereço sem espaço. Nada disso pode esticar a página: quebra. */
  p, li, dd, td, th, figcaption, blockquote {
    overflow-wrap: break-word;
  }

  /* Números de dinheiro e contadores nunca "dançam" ao atualizar */
  [data-numeric] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
}