/* ---------------------------------------------------------------------------
 * brand.css — Identidade visual SVA Tech / SmartVision.
 *
 * Fonte da verdade: landing do SmartVision SV4001 (paleta do datasheet).
 * Carregado DEPOIS do Tailwind. As cores da paleta entram pelo tailwind.config
 * em inc/layout.php (as escalas `slate` e `emerald` foram remapeadas para os
 * neutros e o azul do datasheet), então as ~60 telas herdam a identidade sem
 * precisar reescrever classe por classe. Aqui ficam só tipografia e os detalhes
 * que o Tailwind não cobre.
 * ------------------------------------------------------------------------- */

:root {
    --prata:       #EFF0F2;
    --prata-deep:  #E3E5E8;
    --chumbo:      #4A4B4D;
    --chumbo-deep: #3A3B3D;
    --chumbo-line: #5C5D60;
    --grafite:     #2E2F31;
    --azul:        #7FA7C7;
    --azul-forte:  #4E86AE;
    --azul-claro:  #B9CFE2;
    --titulo:      #6D6E71;
    --text-l:      #3C3D40;
    --muted-l:     #6E7175;

    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* Tipografia -------------------------------------------------------------- */

body { font-family: var(--font-body); }

h1, h2, h3, .font-display {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2, h3 { font-weight: 700; }

/* Título de página: o cinza do "SmartVision" no datasheet, não preto. */
h1, h2 { color: var(--titulo); }
.dark h1, .dark h2, .bg-slate-700 h1, .bg-slate-700 h2,
.bg-slate-800 h1, .bg-slate-800 h2, .bg-slate-900 h1, .bg-slate-900 h2 { color: #fff; }

/* Números, códigos e identificadores em mono — é o que dá o ar técnico do
   datasheet. Vale para valores em tabela, que também ficam tabulares. */
table td.num, table th.num, .mono, .num,
input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Marcador de seção no estilo do datasheet: mono, caixa alta, tracking largo. */
.kicker {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--azul-forte);
}
.kicker .dot {
    width: 8px; height: 8px;
    border: 1.5px solid currentColor;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

/* Cabeçalho de tabela: mono caixa-alta, como a tabela técnica do datasheet. */
thead th {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Componentes ------------------------------------------------------------- */

/* Nome do app ao lado da logo, separado por um filete — diz em qual sistema da
   SVA você está sem competir com a marca. */
.brand-app {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-l);
    padding-left: 12px;
    border-left: 1px solid #D5D8DC;
    line-height: 1;
}

/* Moldura de detecção: a assinatura visual da marca (cantos de bounding box).
   Usar em destaque de conteúdo, ex.: card de proposta em aprovação. */
.detect { position: relative; }
.detect::before, .detect::after,
.detect > .c::before, .detect > .c::after {
    content: ""; position: absolute;
    width: 22px; height: 22px;
    border: 2.5px solid var(--azul-forte);
}
.detect::before { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.detect::after  { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.detect > .c::before { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.detect > .c::after  { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* Foco visível no azul de ação, em vez do anel padrão do browser. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--azul-forte);
    outline-offset: 2px;
}

/* Botão primário ganha a sombra azul da landing. */
.bg-emerald-600 { box-shadow: 0 4px 14px rgba(78, 134, 174, .28); }
.bg-emerald-600:hover { box-shadow: 0 6px 18px rgba(78, 134, 174, .38); }

/* Impressão: fundo branco, sem sombra. */
@media print {
    body { background: #fff; }
    header, nav, .no-print { display: none !important; }
    .bg-emerald-600 { box-shadow: none; }
}