/*
 * Tokens de design — Saúde nas Margens
 *
 * Extraídos do mockup de referência
 * (app-web-saude-margens/mockup/Plataforma Web ... .html) por frequência de uso.
 * Esta é a fonte única: nenhum valor de cor, raio ou fonte deve ser escrito
 * direto nos outros CSS. O mesmo conjunto alimenta o design system publicado
 * no claude.ai/design.
 */

:root {
    /* ---- Marca e superfícies ------------------------------------------- */
    --cor-tinta: #06191B;        /* petróleo quase-preto: texto e sidebar */
    --cor-marca: #37A6AD;        /* turquesa: acento, item ativo, foco */
    --cor-marca-escura: #1C6E73; /* links e valores destacados */
    --cor-marca-clara: #2F9198;
    --cor-fundo: #0D2224;        /* fundo do documento, atrás dos cards */
    --cor-superficie: #FFFFFF;
    --cor-superficie-2: #FAFCFB;
    --cor-campo: #F4F8F7;        /* fundo de input */
    --cor-suave: #EEF3F2;
    --cor-suave-2: #E2ECEA;
    --cor-suave-3: #EAF1ED;

    /* ---- Texto --------------------------------------------------------- */
    --cor-texto: var(--cor-tinta);
    --cor-texto-medio: #3D5052;
    --cor-texto-secundario: #7C8F91;
    --cor-texto-fraco: #9AA9AB;
    --cor-texto-inverso: #FFFFFF;

    /* ---- Bordas -------------------------------------------------------- */
    --cor-borda: #DCE6E4;        /* borda de card */
    --cor-borda-campo: #D3DEDC;  /* borda de input */
    --cor-borda-forte: #C6D2D0;

    /* ---- Eixos One Health (humano / animal / meio ambiente) ------------ */
    --cor-eixo-humano: #E4A93C;
    --cor-eixo-animal: #D2825A;
    --cor-eixo-ambiente: #6FA85C;

    /* ---- Status do alerta: par fundo/texto ----------------------------- */
    --status-rascunho-bg: #EAEFEE;    --status-rascunho-fg: #5A6E70;
    --status-enviado-bg: #E4F1F1;     --status-enviado-fg: #1C6E73;
    --status-analise-bg: #FBF0DA;     --status-analise-fg: #9A6E12;
    --status-validado-bg: #E7F1E1;    --status-validado-fg: #3E6B2E;
    --status-descartado-bg: #F7E1DC;  --status-descartado-fg: #A5361F;

    /* ---- Ações --------------------------------------------------------- */
    --cor-sucesso: #6FA85C;
    --cor-perigo: #C0442E;
    --cor-atencao: #E4A93C;

    /* ---- Papéis -------------------------------------------------------- */
    --cor-papel-agente: #E4A93C;
    --cor-papel-supervisor: #37A6AD;
    --cor-papel-coordenador: #6FA85C;
    --cor-papel-admin: #C0442E;

    /* ---- Tipografia ----------------------------------------------------
     * Bricolage Grotesque em títulos e números grandes; IBM Plex Sans no
     * corpo; IBM Plex Mono em código, CNES, INE, datas e rótulos em caixa
     * alta. As famílias vêm de arquivos locais (ver fontes.css) — sem CDN.
     */
    --fonte-titulo: 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
    --fonte-corpo: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --fonte-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    --texto-xs: 9.5px;
    --texto-sm: 10.5px;
    --texto-rotulo: 11px;   /* rótulos em caixa alta */
    --texto-base: 12.5px;
    --texto-md: 13.5px;
    --texto-lg: 14px;
    --texto-xl: 18px;
    --texto-titulo: 25px;
    --texto-kpi: 34px;

    /* rótulos em caixa alta usam este espaçamento — é a assinatura visual */
    --espaco-letra-rotulo: .12em;
    --espaco-letra-mono: .04em;

    /* ---- Raios --------------------------------------------------------- */
    --raio-card: 16px;
    --raio-campo: 10px;
    --raio-botao: 11px;
    --raio-chip: 999px;
    --raio-pequeno: 8px;

    /* ---- Espaçamento (escala de 4) ------------------------------------- */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;
    --esp-10: 40px;

    /* ---- Elevação ------------------------------------------------------ */
    --sombra-card: 0 1px 2px rgba(6, 25, 27, .04);
    --sombra-flutuante: 0 8px 24px rgba(6, 25, 27, .12);

    /* ---- Layout -------------------------------------------------------- */
    --largura-sidebar: 244px;
    --altura-header: 62px;
    /* Piso do alvo acordado: notebook pequeno e tablet. Abaixo disto a página
       rola na horizontal — de forma previsível — em vez de desmontar. O celular
       fica de fora porque quem coleta em campo usa o app. */
    --largura-minima: 768px;
}

/* -----------------------------------------------------------------------------
 * Breakpoints
 *
 * Estão aqui como DOCUMENTAÇÃO, não como tokens: `@media (max-width: var(--x))`
 * é inválido e falha em silêncio — custom property não é avaliada na condição
 * da media query. Nos arquivos, os valores aparecem literais.
 *
 *   1280px  três colunas viram duas
 *   1024px  a coluna lateral (300–340px) desce para baixo do conteúdo
 *    768px  KPIs e filtros reduzem colunas; a sidebar encolhe para 200px
 * -------------------------------------------------------------------------- */