/*
 * BENEL Golden Path — tokens em CSS puro (qualquer sistema web, sem framework).
 * Fonte: tokens/tokens.json. Importe uma vez no início do CSS do sistema.
 *   <link rel="stylesheet" href="benel-tokens.css">
 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../assets/tipografia/inter/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../assets/tipografia/inter/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../assets/tipografia/inter/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../assets/tipografia/inter/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../../assets/tipografia/inter/Inter-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('../../assets/tipografia/inter/Inter-Black.woff2') format('woff2'); }

:root {
    /* Marca */
    --bn-verde: #86d105;
    --bn-neon: #ccff00;            /* só peças de marca/grafismos */
    --bn-petroleo: #00312e;
    --bn-petroleo-claro: #004743;
    --bn-verde-sucesso: #009900;
    --bn-azul: #036aff;
    --bn-amarelo: #ffeb33;

    /* Escala do verde (700 = texto verde sobre branco) */
    --bn-verde-50: #f7fee7;
    --bn-verde-100: #ecfccb;
    --bn-verde-200: #d9f99d;
    --bn-verde-300: #bef264;
    --bn-verde-600: #74b504;
    --bn-verde-700: #4d7c0f;

    /* Neutros */
    --bn-branco: #ffffff;
    --bn-fundo: #f8fafc;
    --bn-fundo-alt: #f6faf9;
    --bn-neutro-100: #f1f5f9;
    --bn-borda: #e2e8f0;
    --bn-neutro-300: #cbd5e1;
    --bn-texto-suave: #64748b;
    --bn-texto-2: #475569;
    --bn-texto: #00312e;

    /* Funcionais */
    --bn-sucesso: #009900;
    --bn-aviso: #f59e0b;
    --bn-erro: #eb1414;
    --bn-info: #036aff;

    /* Tipografia */
    --bn-fonte: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bn-fonte-marca: 'Gellix', 'Inter', sans-serif;

    /* Forma */
    --bn-raio-botao: 12px;
    --bn-raio-card: 16px;
    --bn-raio-folha: 24px;
    --bn-raio-painel: 64px;
    --bn-raio-pilula: 9999px;

    /* Sombra */
    --bn-sombra-card: 0 1px 2px rgb(15 23 42 / 0.05), 0 4px 14px rgb(15 23 42 / 0.06);
    --bn-sombra-card-lg: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 10px 30px rgb(15 23 42 / 0.12);
    --bn-sombra-verde: 0 10px 25px -5px rgb(134 209 5 / 0.4);

    /* Gradientes */
    --bn-grad-hero: linear-gradient(160deg, rgb(0 49 46 / 0.96) 0%, rgb(0 71 67 / 0.88) 55%, rgb(0 71 67 / 0.7) 100%);
    --bn-grad-cta: linear-gradient(to right, #00312e, #00312e, #004743);

    /* Espaço (escala 4px, densidade compacta) */
    --bn-esp-1: 4px;
    --bn-esp-2: 8px;
    --bn-esp-3: 12px;
    --bn-esp-4: 16px;
    --bn-esp-6: 24px;
    --bn-esp-8: 32px;
}

/* Base mínima recomendada */
html { -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bn-fundo); color: var(--bn-texto); font-family: var(--bn-fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--bn-verde-600); outline-offset: 2px; }

/* Utilitários de texto */
.bn-titulo { font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: var(--bn-petroleo); }
.bn-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bn-verde-700); }
.bn-kpi { font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.bn-num { font-variant-numeric: tabular-nums; }