/* ==========================================================================
NR Gestão, tokens.css
Sistema de design (identidade azul + verde). Base para todas as páginas.
Stack: HTML estático na Hostinger. Sem WordPress.
Fontes (Google Fonts): APENAS DUAS, Archivo (títulos) e IBM Plex Sans
(texto e rótulos). Os códigos da norma (NR-1, PGR, GRO) ganham destaque
pelo estilo do chip .tag-mono, sem uma terceira família.
========================================================================== */
/* Importar no de cada página:
*/
:root{
/* ---- Paleta da marca ---- */
--nr-navy:#0F2E4D; /* Azul Conformidade (primária) */
--nr-navy-deep:#0A1E36; /* Azul Profundo (fundos escuros/rodapé) */
--nr-steel:#2C5A82; /* Azul Aço (apoio) */
--nr-green:#12876B; /* Verde Conforme (ação/CTA/conformidade) */
--nr-green-bright:#17A88A;/* Verde Claro (hover/detalhe) */
--nr-amber:#E0982E; /* Âmbar Alerta (prazo/fiscalização, uso raro) */
--nr-ink:#0C1A28; /* Grafite (texto) */
--nr-muted:#54677A; /* Texto de apoio */
--nr-fog:#F1F5F9; /* Fundo de página */
--nr-white:#FFFFFF;
--nr-surface-2:#F7FAFC;
--nr-line:#E0E7EE;
/* ---- Tokens semânticos (use estes nos componentes) ---- */
--bg:var(--nr-fog);
--surface:var(--nr-white);
--surface-2:var(--nr-surface-2);
--text:var(--nr-ink);
--text-dim:var(--nr-muted);
--line:var(--nr-line);
--brand:var(--nr-navy); /* preenchimentos da marca */
--brand-ink:var(--nr-navy); /* cor da marca legível sobre fundo claro */
--accent:var(--nr-green); /* ação/CTA */
--accent-strong:var(--nr-green-bright);
--warn:var(--nr-amber); /* semântico: prazo/alerta */
--on-brand:#EAF2F8; /* texto sobre azul */
--on-accent:#FFFFFF; /* texto sobre verde */
/* Variantes escurecidas p/ TEXTO sobre fundo claro tintado (ex.: .pill).
--accent-strong/--warn são calibrados p/ fundo escuro (contraste ~2:1
em fundo claro, abaixo do mínimo AA de 4,5:1); estas passam ~5:1+. */
--accent-text:#0C6B54;
--warn-text:#8A5A14;
/* ---- Tipografia ---- */
--font-display:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Só duas famílias. Rótulos/códigos usam a body com espaçamento e caixa alta. */
/* Escala tipográfica (fluida) */
--fs-hero:clamp(2.1rem, 6vw, 3.4rem);
--fs-h1:clamp(1.9rem, 4.8vw, 2.8rem);
--fs-h2:clamp(1.35rem, 3.2vw, 1.9rem);
--fs-h3:1.05rem;
--fs-body:1.02rem;
--fs-small:.85rem;
--fs-eyebrow:.72rem;
/* ---- Layout ---- */
--maxw:1120px;
--maxw-prose:68ch;
--gutter:20px;
--radius:14px;
--radius-sm:10px;
--radius-pill:999px;
--shadow:0 1px 2px rgba(12,26,40,.06), 0 8px 30px rgba(12,26,40,.06);
--space-section:64px;
}
/* ---- Tema escuro (system) ---- */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--bg:#0A1622;
--surface:#0F2536;
--surface-2:#0C1E2D;
--text:#E9F0F6;
--text-dim:#93A6B6;
--line:#1E3A53;
--brand:#153A5E;
--brand-ink:#8FC4E6;
--on-brand:#EAF2F8;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
/* Em fundo escuro, os tons vivos originais já têm ótimo contraste */
--accent-text:var(--accent-strong);
--warn-text:var(--warn);
}
}
/* ---- Tema escuro (escolha explícita) ---- */
:root[data-theme="dark"]{
--bg:#0A1622;
--surface:#0F2536;
--surface-2:#0C1E2D;
--text:#E9F0F6;
--text-dim:#93A6B6;
--line:#1E3A53;
--brand:#153A5E;
--brand-ink:#8FC4E6;
--accent-text:var(--accent-strong);
--warn-text:var(--warn);
--on-brand:#EAF2F8;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.45);
}
/* ==========================================================================
Base
========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);font-weight:700}
p{margin:.6em 0;max-width:var(--maxw-prose)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
/* ---- Layout helpers ---- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-section)}
.section + .section{border-top:1px solid var(--line)}
/* ---- Eyebrow / rótulo mono ---- */
.eyebrow{
font-family:var(--font-body);
font-size:var(--fs-eyebrow);
letter-spacing:.16em;
text-transform:uppercase;
color:var(--brand-ink);
font-weight:600;
}
/* ==========================================================================
Componentes
========================================================================== */
/* Botões, use CTA verde como ação primária */
.btn{
font-family:var(--font-display);
font-weight:700;
font-size:.95rem;
line-height:1;
border-radius:var(--radius-sm);
padding:13px 20px;
border:1px solid transparent;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-nav{background:var(--brand);color:var(--on-brand)}
.btn-ghost{background:transparent;color:var(--brand-ink);border-color:var(--line)}
/* Selos de status */
.pill{
display:inline-flex;align-items:center;gap:7px;
font-family:var(--font-body);font-size:.8rem;font-weight:600;
padding:5px 12px;border-radius:var(--radius-pill);
}
.pill--ok{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-text)}
.pill--warn{background:color-mix(in srgb, var(--warn) 20%, transparent);color:var(--warn-text)}
.pill--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* Chip de código da norma (NR-1, PGR, GRO, Portaria 1.419/2024).
Sem fonte própria: usa a body com peso e leve espaçamento. */
.tag-mono{
font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.02em;
color:var(--brand-ink);border:1px solid var(--line);
border-radius:7px;padding:3px 9px;background:var(--surface-2);
}
/* Card */
.card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
padding:22px;
box-shadow:var(--shadow);
}
/* Grade responsiva de cards */
.grid{display:grid;gap:16px}
.grid--auto{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
/* Tabela (envolver em .table-wrap para overflow no mobile) */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;font-size:.95rem}
th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--brand);color:var(--on-brand);font-family:var(--font-display);font-weight:600;font-size:.85rem}
tr:last-child td{border-bottom:0}
/* Hero sobre fundo azul */
.hero-dark{background:linear-gradient(160deg, var(--nr-navy-deep), var(--nr-navy) 70%);color:var(--on-brand)}
.hero-dark h1{color:#fff}
.hero-dark .eyebrow{color:var(--accent-strong)}
/* WhatsApp/Leadster flutuante (posicionar no canto) */
.float-cta{position:fixed;right:18px;bottom:18px;z-index:50}
/* Utilitário: números tabulares em tabelas de preço/prazo */
.tnum{font-variant-numeric:tabular-nums}