/* =============================================================================
   tokens.css: FONTE ÚNICA DA VERDADE visual do Recursos Humanos.

   Todo valor de cor, fonte, tamanho, espaçamento, raio e sombra do app sai daqui.
   Templates e componentes usam var(--token); valor fixo em código é proibido
   (ver DESIGN_RULES.md na raiz).

   Base: cópia dos tokens do Compras (30/09/2026), que herdam do CRM. Mesmos nomes
   de variável para os sistemas internos serem da mesma família. O painel do RH
   usa estes valores sem mudança.

   O PORTAL DO CANDIDATO (<body data-area="portal">) troca, no fim do arquivo: a cor
   de ação (azul-marinho da marca Meridional, no lugar do índigo), a paleta (azulada,
   com faixa de marca), a escala de texto (fluida, campo com 16px para o iPhone não dar
   zoom), a fonte dos títulos (Plus Jakarta Sans) e os raios (mais arredondados).
   Direção visual aprovada em 07/10/2026 (design-system/mockups/aprovados/).

   Tema: claro é o padrão (:root). O escuro vale com [data-theme="dark"] no <html>,
   aplicado por static/js/tema.js (preferência salva ou a do sistema operacional).
   ============================================================================= */

:root {
  /* ---- tipografia: 7 tamanhos, 3 espessuras (escala do CRM) ---- */
  --fonte: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-2xs: 10px;   /* contador, etiqueta pequena */
  --fs-xs: 11px;    /* rótulo, cabeçalho de tabela, legenda */
  --fs-sm: 12px;    /* tabela, lista, campo, botão, menu */
  --fs-md: 13px;    /* texto normal */
  --fs-lg: 15px;    /* título de card, seção, modal */
  --fs-xl: 18px;    /* título da página */
  --fs-2xl: 22px;   /* número grande de indicador */
  --fw-normal: 400;
  --fw-media: 600;
  --fw-forte: 700;
  --fw-extra: 800;    /* títulos do portal (Plus Jakarta Sans vai até 800) */
  --lh: 1.5;

  /* ---- espaçamento (múltiplos de 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;    /* portal: respiro entre blocos, base da faixa de marca */
  --sp-12: 48px;    /* portal: fim da página */
  --sp-16: 64px;    /* portal: topo da faixa de marca no desktop */
  --sp-20: 80px;    /* portal: base da faixa de marca no desktop */

  /* ---- raios ---- */
  --r-sm: 6px;      /* item de menu, chip pequeno, checkbox */
  --r-md: 8px;      /* botão, campo, tabela */
  --r-lg: 14px;     /* card */
  --r-xl: 12px;     /* alvos grandes do celular */
  --r-pill: 20px;

  /* ---- medidas de layout ---- */
  --sidebar-w: 208px;
  --topbar-h: 48px;
  --faixa-h: 18px;      /* faixa "Ambiente teste/local" no topo (não existe em produção) */
  --alvo-toque: 44px;   /* altura mínima de alvo no celular */
  --largura-lateral: 320px;

  /* ---- movimento ---- */
  --transicao: 150ms ease;

  /* ---- menu lateral: SEMPRE escuro, nos dois temas (padrão do CRM) ---- */
  --sb-bg: rgba(15, 23, 42, 0.97);
  --sb-borda: rgba(255, 255, 255, 0.06);
  --sb-texto: #c8cdd6;
  --sb-texto-hover: #ffffff;
  --sb-texto-on: #a5b4fc;
  --sb-hover: rgba(255, 255, 255, 0.05);
  --sb-on: rgba(99, 102, 241, 0.15);
  --sb-on-borda: rgba(99, 102, 241, 0.30);
  --sb-secao: #5a6378;
  --sb-nome: #f1f5f9;
  --sb-papel: #64748b;

  /* texto sobre vermelho sólido (contador, divergência): branco nos dois temas */
  --sobre-vermelho: #ffffff;

  /* texto sobre cor sólida (botão primário, avatar) */
  --sobre-cor: #ffffff;
}

/* ---- tema claro (padrão) ---- */
:root,
[data-theme="light"] {
  --bg: #e4e7ed;
  --card: #ffffff;
  --card2: #f5f7fa;
  --card-solido: #ffffff;    /* superfície opaca (painel lateral por cima da tela) */
  --veu: rgba(2, 6, 23, 0.35);   /* fundo escurecido atrás do painel lateral */
  --sombra-botao-trilho: 0 1px 2px rgba(0, 0, 0, 0.25);
  --border: rgba(0, 0, 0, 0.08);
  --border2: rgba(0, 0, 0, 0.14);

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-light: rgba(79, 70, 229, 0.08);
  --accent-borda: rgba(79, 70, 229, 0.20);
  --accent-text: #4f46e5;

  --text: #1e293b;
  --muted: #64748b;
  --text-dim: #94a3b8;

  --green: #15803d;          /* mais escuro que o do CRM (#16a34a): contraste AA com texto branco */
  --green-bg: rgba(22, 163, 74, 0.07);
  --amber: #b45309;          /* mais escuro que o do CRM: contraste AA em texto pequeno */
  --amber-bg: rgba(217, 119, 6, 0.10);
  --amber-borda: rgba(217, 119, 6, 0.25);
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.08);
  --neutro-bg: rgba(100, 116, 139, 0.07);
  --neutro-texto: #556274;

  --input-bg: rgba(255, 255, 255, 0.75);
  --input-border: rgba(0, 0, 0, 0.12);
  --input-desabilitado: rgba(0, 0, 0, 0.04);

  --sobre-cor: #ffffff;

  --sombra-card: none;
  --sombra-flutuante: 0 8px 24px rgba(15, 23, 42, 0.12);
  --fundo-gradiente: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(79, 70, 229, 0.06) 0%, transparent 60%);
}

/* ---- tema escuro ---- */
[data-theme="dark"] {
  --bg: #06080f;
  --card: rgba(22, 28, 48, 0.75);
  --card2: rgba(28, 34, 56, 0.65);
  --card-solido: #111729;
  --veu: rgba(0, 0, 0, 0.55);
  --sombra-botao-trilho: 0 1px 2px rgba(0, 0, 0, 0.5);
  --border: rgba(255, 255, 255, 0.09);
  --border2: rgba(255, 255, 255, 0.14);

  --accent: #818cf8;
  --accent-hover: #6366f1;
  --accent-light: rgba(129, 140, 248, 0.10);
  --accent-borda: rgba(129, 140, 248, 0.25);
  --accent-text: #a5b4fc;

  --text: #e2e8f0;
  --muted: #94a3b8;
  --text-dim: #5a6378;

  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.10);
  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.10);
  --amber-borda: rgba(251, 191, 36, 0.25);
  --red: #f43f5e;
  --red-bg: rgba(244, 63, 94, 0.10);
  --neutro-bg: rgba(148, 163, 184, 0.12);
  --neutro-texto: #94a3b8;

  --input-bg: rgba(8, 11, 22, 0.70);
  --input-border: rgba(255, 255, 255, 0.10);
  --input-desabilitado: rgba(255, 255, 255, 0.03);

  --sombra-card: none;
  --sombra-flutuante: 0 8px 24px rgba(0, 0, 0, 0.45);
  --fundo-gradiente: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(56, 97, 251, 0.10) 0%, transparent 60%);

  /* no escuro o botão primário é índigo claro: texto escuro lê melhor */
  --sobre-cor: #0b1020;
}

/* =============================================================================
   MARCA MERIDIONAL (cores do logo). Só aparecem no logo e em detalhes de marca
   (faixa do topo do portal). Nunca como cor de status: verde de marca não é "ok".
   ============================================================================= */
:root {
  --marca-azul: #023654;
  --marca-verde: #35924b;
  --marca-amarelo: #fdd13a;
  /* fundo de QR code: branco nos DOIS temas (leitor de celular não lê QR invertido) */
  --qr-fundo: #ffffff;
}

/* =============================================================================
   PORTAL DO CANDIDATO: <body data-area="portal">
   Direção "Jornada guiada" (mockup B) + fluxograma e números do hero (mockup C),
   aprovada em 07/10/2026.
   ============================================================================= */
[data-area="portal"] {
  /* fontes: títulos e números grandes em Plus Jakarta Sans; texto em Inter (fontes.css) */
  --fonte-titulo: 'Plus Jakarta Sans', var(--fonte);   /* h1-h3 e números grandes do portal */

  /* escala de texto fluida (cqi = largura do <body data-area="portal">, que é o container).
     Leitura no celular, por gente de fora; menos que 16px no campo = zoom no iPhone. */
  --pt-xs: 13px;                                            /* legenda, ajuda do campo, data de publicação */
  --pt-sm: 14px;                                            /* etiqueta de vaga, texto secundário */
  --pt-md: 16px;                                            /* texto normal e TODO campo de formulário */
  --pt-lg: clamp(1.125rem, 1.04rem + 0.45cqi, 1.3125rem);   /* 18-21: título de cartão e de bloco */
  --pt-xl: clamp(1.375rem, 1.18rem + 0.95cqi, 1.75rem);     /* 22-28: título de seção e de página */
  --pt-2xl: clamp(1.75rem, 1.35rem + 1.9cqi, 2.5rem);       /* 28-40: título da vaga */
  --pt-display: clamp(2.125rem, 1.45rem + 3.3cqi, 3.75rem); /* 34-60: chamada da lista e da página Sobre */
  --pt-numero: clamp(1.75rem, 1.2rem + 2.4cqi, 3rem);       /* 28-48: números grandes do hero */
  --lh-texto: 1.6;
  --lh-titulo: 1.12;

  /* medidas */
  --largura-leitura: 720px;   /* coluna de texto da candidatura */
  --largura-portal: 1120px;
  --ritmo: clamp(40px, 7cqi, 88px);   /* respiro entre seções da página Sobre */

  /* raios mais arredondados que o painel (amigável, celular primeiro) */
  --r-md: 14px;      /* botão, campo, tile */
  --r-lg: 22px;      /* cartão */
  --r-ml: 18px;      /* bloco dentro de cartão: estatística, data-limite, passo, aviso */
  --r-cta: 24px;     /* barra de candidatura fixa no rodapé do celular */
  --r-hero: 32px;    /* canto de baixo da faixa de marca, celular */
  --r-hero-lg: 48px; /* idem, desktop */

  /* iguais nos dois temas, de propósito */
  --banda-campo-bg: #ffffff;        /* campo de busca sobre a faixa azul: branco nos dois temas */
  --banda-campo-texto: #0a2132;     /* texto digitado nesse campo */
  --banda-campo-suave: #5b6e7d;     /* ícone e placeholder desse campo */
  --banda-chip-hover: rgba(255, 255, 255, 0.20);   /* botão translúcido sobre a faixa, no hover */
  --mascara: #000000;               /* só o alfa conta: máscara que esmaece o pattern do hero */

  /* impressão da carta da proposta (A4): papel branco e tintas claras nos dois temas */
  --imp-fundo: #ffffff;             /* fundo da página impressa */
  --imp-nota: #475b6a;              /* nota de rodapé da carta impressa (proposta, cargo, contato do RH) */
  --imp-linha: #d3dce2;             /* filete acima dessa nota */
}

[data-theme="light"] [data-area="portal"],
:root:not([data-theme="dark"]) [data-area="portal"] {
  --accent: #023654;                    /* azul da marca: 13:1 sobre branco */
  --accent-hover: #0a4a70;              /* também é a cor do anel de foco (3px) */
  --accent-light: rgba(2, 54, 84, 0.07);
  --accent-borda: rgba(2, 54, 84, 0.22);
  --accent-text: #023654;
  --sobre-cor: #ffffff;
  --fundo-gradiente: none;

  /* paleta azulada (a do painel é cinza-azulada neutra) */
  --bg: #e8eef3;
  --card: #ffffff;
  --card2: #f2f6f9;
  --card-solido: #ffffff;
  --text: #0a2132;
  --muted: #46596a;
  --text-dim: #6a7c8a;
  --border: rgba(2, 54, 84, 0.08);
  --border2: rgba(2, 54, 84, 0.16);
  --sombra-card: 0 1px 2px rgba(2, 54, 84, 0.05), 0 12px 28px -14px rgba(2, 54, 84, 0.22);
  --sombra-cta: 0 -8px 24px rgba(2, 54, 84, 0.12);   /* barra de candidatura fixa (celular) */
  --sombra-folha: 0 12px 40px rgba(2, 54, 84, 0.18); /* cartão de confirmação do aceite da proposta */
  --tile-bg: #e3eef6;                   /* fundo do tile com a sigla da área */

  /* faixa de marca (hero): azul da marca, texto branco */
  --banda: #023654;                           /* fundo da faixa de marca (hero) */
  --banda-texto: #ffffff;                     /* texto principal sobre a faixa */
  --banda-suave: rgba(255, 255, 255, 0.80);   /* texto secundário sobre a faixa */
  --banda-linha: rgba(255, 255, 255, 0.22);   /* filetes e bordas sobre a faixa */
  --banda-chip: rgba(255, 255, 255, 0.12);    /* pílulas e blocos translúcidos sobre a faixa */
  --faixa-azul: var(--marca-azul);            /* trecho azul da faixa de 4px do topo */
  --chip-contagem-ativo: rgba(255, 255, 255, 0.20);   /* contador dentro do filtro ativo */
}

[data-theme="dark"] [data-area="portal"] {
  --accent: #7cc0e8;                    /* azul da marca clareado: contraste AA sobre o fundo escuro */
  --accent-hover: #a3d4f1;              /* também é a cor do anel de foco (3px) */
  --accent-light: rgba(124, 192, 232, 0.10);
  --accent-borda: rgba(124, 192, 232, 0.28);
  --accent-text: #9fd0ee;
  --sobre-cor: #06131c;
  --fundo-gradiente: none;

  --bg: #06111a;
  --card: #0d1f2c;
  --card2: #112a3b;
  --card-solido: #0d1f2c;
  --text: #eaf1f6;
  --muted: #9db3c3;
  --text-dim: #6f8797;
  --border: rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.15);
  --sombra-card: none;
  --sombra-cta: 0 -8px 24px rgba(0, 0, 0, 0.45);
  --sombra-folha: 0 12px 40px rgba(0, 0, 0, 0.45);   /* cartão de confirmação do aceite da proposta */
  --tile-bg: #15354b;

  --banda: #0c2a3d;                     /* fundo da faixa: azul da marca rebaixado, sem brigar com o fundo escuro */
  --banda-texto: #f1f5f9;               /* texto principal sobre a faixa */
  --banda-suave: rgba(241, 245, 249, 0.78);
  --banda-linha: rgba(255, 255, 255, 0.16);
  --banda-chip: rgba(255, 255, 255, 0.10);
  --faixa-azul: #2a6a8f;                /* azul da marca clareado para a faixa de 4px aparecer no escuro */
  --chip-contagem-ativo: rgba(0, 0, 0, 0.15);
}

/* Impressão da carta da proposta: no tema escuro a carta sai com a paleta clara (papel branco, tinta escura). */
@media print {
  [data-theme="dark"] [data-area="portal"] {
    --accent: #023654; --accent-hover: #0a4a70; --accent-light: rgba(2, 54, 84, 0.07);
    --accent-borda: rgba(2, 54, 84, 0.22); --accent-text: #023654; --sobre-cor: #ffffff;
    --bg: #ffffff; --card: #ffffff; --card2: #f2f6f9; --card-solido: #ffffff;
    --text: #0a2132; --muted: #46596a; --text-dim: #6a7c8a;
    --border: rgba(2, 54, 84, 0.08); --border2: rgba(2, 54, 84, 0.16); --sombra-card: none;
    --green: #15803d; --green-bg: rgba(22, 163, 74, 0.07);
    --amber: #b45309; --amber-bg: rgba(217, 119, 6, 0.10); --amber-borda: rgba(217, 119, 6, 0.25);
    --neutro-bg: rgba(100, 116, 139, 0.07);
    --banda: #023654; --banda-texto: #ffffff; --banda-suave: rgba(255, 255, 255, 0.80);
    --banda-linha: rgba(255, 255, 255, 0.22); --banda-chip: rgba(255, 255, 255, 0.12);
  }
}