/* ============================================================
   KS IMPORT · DESIGN TOKENS
   Fonte única de verdade visual para SITE + CRM.
   Derivado do BRAND_BOOK_KS_IMPORT.md (v1.0 — Jun/2026).
   Importe este arquivo em TODA página antes de qualquer estilo.
   Regra: ZERO cor escrita "na mão" — sempre via var(--token).
   ============================================================ */

:root {
  /* ---- Cores primárias (logo) ---- */
  --grafite:        #2B2F36;  /* cor-mãe: títulos, IMPORT, rodapé */
  --grafite-900:    #181B20;  /* preto industrial: hero/fundos drama */
  --azul-ks:        #1C6FB5;  /* cor de ação: CTA, links, o "S" */
  --azul-profundo:  #0E3F73;  /* base do gradiente, hover */
  --azul-ciano:     #2BA8E0;  /* topo do gradiente, brilho metálico */

  /* ---- Neutros / aço ---- */
  --prata:          #9AA3AD;  /* texto secundário, ícones */
  --aco-claro:      #C9D0D7;  /* bordas, divisórias */
  --nevoa:          #EEF2F6;  /* seção alternada, cards */
  --branco-tecnico: #F8FAFC;  /* fundo base — NÃO usar #FFF puro */

  /* ---- Status funcionais (CRM) ---- */
  --sucesso: #1E9E62;
  --alerta:  #E0A106;
  --erro:    #D14343;
  --info:    #1C6FB5;

  /* ---- Gradiente oficial (o "S" / CTAs principais) ---- */
  --grad-azul: linear-gradient(135deg, #2BA8E0 0%, #1C6FB5 45%, #0E3F73 100%);
  --grad-grafite: linear-gradient(160deg, #2B2F36 0%, #181B20 100%);

  /* ---- Tipografia ---- */
  --font-titulo: "Saira", "Rajdhani", system-ui, sans-serif;
  --font-corpo:  "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:   "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  --fs-h1: 40px;  --lh-h1: 48px;
  --fs-h2: 30px;  --lh-h2: 38px;
  --fs-h3: 22px;  --lh-h3: 28px;
  --fs-h4: 18px;  --lh-h4: 24px;
  --fs-body: 16px; --lh-body: 26px;
  --fs-sm: 14px;  --lh-sm: 22px;
  --fs-label: 12px; --ls-label: 0.08em;

  /* ---- Forma / espaço / sombra ---- */
  --raio-sm: 6px;
  --raio:    10px;
  --raio-lg: 16px;
  --sombra:    0 1px 3px rgba(24,27,32,.08), 0 6px 18px rgba(24,27,32,.06);
  --sombra-lg: 0 10px 40px rgba(14,63,115,.14);
  --borda: 1px solid var(--aco-claro);
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;
  --maxw: 1200px;
}

/* ---- Reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-corpo);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--grafite);
  background: var(--branco-tecnico);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-titulo); color: var(--grafite); margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
a { color: var(--azul-ks); text-decoration: none; }
a:hover { color: var(--azul-profundo); }
code, .mono, .sku { font-family: var(--font-mono); }
.label {
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--azul-ks); font-weight: 600;
}

/* ---- Botões ---- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-corpo);
  font-weight:600; font-size:15px; padding:12px 22px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:.18s; }
.btn-primary { background: var(--grad-azul); color:#fff; }
.btn-primary:hover { filter:brightness(1.05); color:#fff; box-shadow: var(--sombra-lg); }
.btn-secondary { background:transparent; color:var(--grafite); border-color:var(--grafite); }
.btn-secondary:hover { background:var(--grafite); color:#fff; }
.btn-ghost { background:var(--nevoa); color:var(--grafite); }

/* ---- Card ---- */
.card { background:#fff; border:var(--borda); border-radius:var(--raio);
  padding:var(--space-4); box-shadow:var(--sombra); }
.card-acao { border-top:3px solid transparent; border-image: var(--grad-azul) 1; }

/* ---- Hexágono (DNA da marca) ---- */
.hex { width:14px; height:16px; display:inline-block;
  background:var(--azul-ks);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hex-bullet { list-style:none; padding-left:0; }
.hex-bullet li { position:relative; padding-left:26px; margin-bottom:10px; }
.hex-bullet li::before { content:""; position:absolute; left:0; top:5px;
  width:13px; height:15px; background:var(--azul-ks);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* ---- Badges de status (CRM) ---- */
.badge { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; }
.badge-quente  { background:rgba(209,67,67,.12);  color:var(--erro); }
.badge-morno   { background:rgba(224,161,6,.14);  color:var(--alerta); }
.badge-frio    { background:rgba(28,111,181,.12); color:var(--azul-ks); }
.badge-ok      { background:rgba(30,158,98,.12);  color:var(--sucesso); }
.badge-atraso  { background:rgba(209,67,67,.12);  color:var(--erro); }

/* ---- Tabela técnica (catálogo/CRM) ---- */
.tbl { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.tbl thead th { background:var(--grafite); color:#fff; text-align:left;
  padding:10px 14px; font-family:var(--font-corpo); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; font-size:12px; }
.tbl tbody td { padding:10px 14px; border-bottom:1px solid var(--aco-claro); }
.tbl tbody tr:nth-child(even) { background:var(--nevoa); }
.tbl .sku { color:var(--azul-profundo); font-weight:600; }

/* ---- Utilitários ---- */
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4); }
.section { padding:var(--space-7) 0; }
.bg-nevoa { background:var(--nevoa); }
.bg-grafite { background:var(--grad-grafite); color:var(--branco-tecnico); }
.bg-grafite h1,.bg-grafite h2,.bg-grafite h3 { color:#fff; }
.text-prata { color:var(--prata); }
.grid { display:grid; gap:var(--space-4); }
@media (min-width:768px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }