/*
 * Componentes .ts-* compartilhados entre as views do site novo.
 *
 * Antes cada view (home, vaga/listar, vaga/detalhe, contato, login...)
 * declarava seu proprio bloco <style> com essas mesmas classes, e foram
 * divergindo aos poucos -- o mesmo .ts-submit-btn em 15px numa pagina e
 * 14px noutra, .ts-card com padding de 24/28/32px dependendo de onde foi
 * copiado. Ver PENDENCIAS.md item 16.
 *
 * Carregado no <head> (inc/header.php) ANTES do <style> proprio de cada
 * view: qualquer regra local com a mesma especificidade continua vencendo
 * pela cascata, entao paginas com uma variante genuinamente diferente
 * (ex.: .ts-submit-btn full-width do login/cadastro) seguem definindo
 * isso localmente sem precisar de !important.
 *
 * Paleta oficial da marca (cliente mandou os 4 hex com nome): Mirage
 * #16232A, Blaze Orange #FF5B04, Deep Sea Green #075056, Wild Sand
 * #E4EEF0. Hierarquia aplicada:
 *   - Wild Sand    = fundo neutro (body). Fundo de bloco de texto longo
 *                    fica branco puro (.ts-card ja' era branco, nao mudou).
 *   - Mirage       = texto principal e estrutura escura (rodape, nav).
 *   - Deep Sea Green = cor de marca secundaria -- gradiente do hero e das
 *                    faixas, mesmo papel que o azul petroleo tinha antes.
 *   - Blaze Orange = accent/CTA, mas SO' em uso decorativo (icone, dot,
 *                    fundo de botao/pilula com texto branco grande o
 *                    suficiente, gradiente). Blaze puro contra branco da'
 *                    3.11:1 e contra Wild Sand 2.64:1 -- falha AA pra texto
 *                    normal e falha ate' o minimo de 3:1 pra texto grande
 *                    sobre Wild Sand. Por isso todo texto/link/botao usa a
 *                    variante escurecida (--blaze-safe, #B44000, 5.7:1
 *                    contra branco e 4.8:1 contra Wild Sand) em vez do tom
 *                    puro. Ver tambem assets/css/ts-mobile.css#5, que forca
 *                    esse mesmo valor com !important pros casos que as
 *                    views antigas ainda declaram com a cor errada.
 */

body {
    font-family: 'Inter', sans-serif;
    color: #16232A;
    background-color: #E4EEF0;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.ts-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #C8D6D9;
    padding: 28px;
    margin-bottom: 20px;
}

.ts-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #16232A;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.ts-input:focus {
    border-color: #075056;
    outline: none;
    box-shadow: 0 0 0 3px rgba(7,80,86,0.12);
}

/* <select class="ts-input"> sem isso cai pro combobox nativo do SO --
   seta cinza do Windows/Chrome destoando da caixa arredondada flat.
   Usado na busca do hero e nos filtros de vaga/listar.php. */
select.ts-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316232A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 34px;
    cursor: pointer;
}

.ts-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #55636B;
    margin-bottom: 6px;
}

/* Fundo do botao usa a variante segura do laranja (nao o Blaze Orange
   puro) -- o texto e' branco em 15px bold, abaixo do limite de "texto
   grande" do WCAG, entao precisa de 4.5:1. Ver nota de paleta acima. */
.ts-submit-btn {
    background: #B44000;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: filter 0.2s;
    display: inline-block;
    text-decoration: none;
}
.ts-submit-btn:hover {
    filter: brightness(0.9);
    color: #fff;
}

.ts-btn-outline {
    background: #fff;
    color: #16232A;
    border: 2px solid #16232A;
    border-radius: 999px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background 0.2s, color 0.2s;
    display: inline-block;
    text-decoration: none;
}
.ts-btn-outline:hover {
    background: #16232A;
    color: #fff;
}

.ts-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #16232A;
    margin-bottom: 16px;
}

.ts-tag {
    display: inline-block;
    background: #D3E3E6;
    color: #075056;
    border: 1px solid #C8D6D9;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'IBM Plex Mono', monospace;
    margin: 2px;
}
