/* =====================================================================
   Design system do Zapperson: tokens.
   Nasce do logo (balão verde com o prompt ">_", wordmark Sora, base chumbo).
   Este arquivo só define variáveis e a tipografia dos títulos; a regra de uso
   está em docs/design-system.md. Nenhum outro CSS deve escrever um hex de cor:
   ele pega o token daqui.
   ===================================================================== */

:root {
    /* ---------- Marca ---------- */
    --zp-verde: #25D366;          /* a marca: botão primário, indicador ligado, destaque */
    --zp-verde-hover: #20BD5A;
    --zp-verde-escuro: #128C7E;   /* verde sobre fundo claro (texto, ícone, link) */
    --zp-verde-700: #15803D;
    --zp-verde-600: #16A34A;
    --zp-verde-texto: #166534;    /* texto sobre verde-100 */
    --zp-verde-100: #DCFCE7;      /* fundo de badge ou chip verde */
    --zp-verde-50: #F0FDF4;

    --zp-chumbo: #1A1D24;         /* barra lateral, fundo do wordmark */
    --zp-chumbo-hover: #2D3138;
    --zp-chumbo-800: #161B22;
    --zp-chumbo-900: #0D1117;     /* fundo do login */

    /* ---------- Neutros (escala de cinza) ---------- */
    --zp-branco: #FFFFFF;
    --zp-cinza-50: #F9FAFB;
    --zp-cinza-100: #F3F4F6;
    --zp-cinza-200: #E5E7EB;
    --zp-cinza-300: #D1D5DB;
    --zp-cinza-400: #9CA3AF;
    --zp-cinza-500: #6B7280;
    --zp-cinza-600: #4B5563;
    --zp-cinza-700: #374151;
    --zp-cinza-800: #1F2937;
    --zp-cinza-900: #111827;

    /* ---------- Superfícies e texto (papéis) ---------- */
    --zp-fundo: #F5F6FA;                 /* fundo da área de conteúdo */
    --zp-superficie: var(--zp-branco);   /* cartão, tabela, painel */
    --zp-borda: var(--zp-cinza-200);
    --zp-borda-suave: var(--zp-cinza-100);
    --zp-texto: var(--zp-cinza-800);
    --zp-texto-suave: var(--zp-cinza-500);
    --zp-texto-fraco: var(--zp-cinza-400);
    --zp-texto-invertido: var(--zp-branco);

    /* ---------- Semânticas ---------- */
    --zp-azul: #3B82F6;           /* informação, grupo */
    --zp-azul-claro: #60A5FA;
    --zp-azul-escuro: #2563EB;
    --zp-azul-texto: #1E40AF;
    --zp-azul-100: #DBEAFE;
    --zp-azul-50: #EFF6FF;

    --zp-ambar: #F59E0B;          /* atenção */
    --zp-ambar-claro: #FCD34D;
    --zp-ambar-texto: #92400E;
    --zp-ambar-100: #FEF3C7;
    --zp-marca-texto: #FEF08A;    /* trecho encontrado na busca */

    --zp-erro: #EF4444;           /* erro, remoção */
    --zp-erro-escuro: #DC2626;
    --zp-erro-texto: #991B1B;
    --zp-erro-claro: #FCA5A5;
    --zp-erro-100: #FEE2E2;

    --zp-roxo: #8B5CF6;           /* só nos orbes do login */

    /* Escala de velocidade do mapa (azul-escuro, verde-600, amarelo, laranja, erro-escuro). */
    --zp-amarelo: #EAB308;
    --zp-laranja: #F97316;

    /* ---------- Conversa (tela do arquivo) ---------- */
    --zp-balao-fundo: #EFEAE2;
    --zp-balao-recebido: var(--zp-branco);
    --zp-balao-enviado: #D9FDD3;

    /* ---------- Tipografia ---------- */
    --zp-fonte: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --zp-fonte-titulo: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --zp-fonte-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --zp-texto-2xs: 0.65rem;    /* micro rótulo: chip de tag, badge de status, separador */
    --zp-texto-xs: 0.7rem;      /* rótulo de badge, hora */
    --zp-texto-sm: 0.8rem;      /* legenda, prévia, ajuda */
    --zp-texto-base: 0.875rem;  /* corpo, formulário, célula */
    --zp-texto-md: 0.95rem;     /* nome de chat, item de menu */
    --zp-texto-lg: 1.05rem;     /* subtítulo */
    --zp-texto-xl: 1.25rem;     /* título de painel */
    --zp-texto-2xl: 1.5rem;     /* título de página */
    --zp-texto-3xl: 2rem;       /* número de destaque */

    /* Ícone dimensionado por font-size (Bootstrap Icons): não é texto, tem escala própria. */
    --zp-icone-xs: 0.6rem;      /* ícone dentro de badge ou chip */
    --zp-icone-sm: 0.8rem;      /* ícone ao lado de rótulo pequeno */
    --zp-icone-md: 1.1rem;      /* ícone de botão e de linha */
    --zp-icone-lg: 2rem;        /* ícone de cabeçalho */
    --zp-icone-xl: 3rem;        /* ilustração de estado vazio */

    --zp-peso-normal: 400;
    --zp-peso-medio: 500;
    --zp-peso-semibold: 600;
    --zp-peso-bold: 700;

    /* ---------- Espaçamento (base 4 px) ---------- */
    --zp-esp-1: 0.25rem;
    --zp-esp-2: 0.5rem;
    --zp-esp-3: 0.75rem;
    --zp-esp-4: 1rem;
    --zp-esp-5: 1.25rem;
    --zp-esp-6: 1.5rem;
    --zp-esp-8: 2rem;

    /* ---------- Bordas e sombras ---------- */
    --zp-raio-xs: 4px;
    --zp-raio-sm: 6px;
    --zp-raio-md: 8px;
    --zp-raio-lg: 12px;
    --zp-raio-xl: 16px;
    --zp-raio-2xl: 20px;
    --zp-raio-pill: 999px;

    --zp-sombra-balao: 0 1px 1px rgba(0, 0, 0, 0.1);      /* balão de mensagem, chip flutuante */
    --zp-sombra-1: 0 1px 3px rgba(0, 0, 0, 0.1);          /* cartão, painel */
    --zp-sombra-2: 0 2px 8px rgba(0, 0, 0, 0.08);         /* cartão em destaque, painel do mapa */
    --zp-sombra-3: 0 6px 24px rgba(0, 0, 0, 0.18);        /* painel flutuante, popover */
    --zp-sombra-4: 0 25px 50px rgba(0, 0, 0, 0.4);        /* cartão do login sobre o fundo escuro */
    --zp-sombra-topo: 0 -4px 20px rgba(0, 0, 0, 0.15);    /* barra fixa no rodapé */
    --zp-brilho-verde: 0 0 100px rgba(37, 211, 102, 0.05); /* halo atrás do cartão do login */
    --zp-brilho-verde-forte: 0 15px 35px rgba(37, 211, 102, 0.4); /* botão primário em hover no login */
    --zp-anel-verde: 0 0 0 4px rgba(37, 211, 102, 0.1);   /* foco de campo */

    /* Véus: cor com transparência sobre outra superfície. Sempre por papel, nunca solto. */
    --zp-veu-escuro: rgba(0, 0, 0, 0.5);          /* fundo atrás do menu no celular */
    --zp-veu-suave: rgba(0, 0, 0, 0.05);          /* citação e documento dentro do balão */
    --zp-veu-claro: rgba(255, 255, 255, 0.85);    /* rótulo de dia sobre o fundo da conversa */
    --zp-veu-branco: rgba(255, 255, 255, 0.97);   /* painel sobre o mapa */
    --zp-veu-branco-borda: rgba(255, 255, 255, 0.08);
    --zp-veu-branco-linha: rgba(255, 255, 255, 0.05);
    --zp-veu-chumbo: rgba(31, 41, 55, 0.6);       /* cartão do login */
    --zp-veu-chumbo-forte: rgba(17, 24, 39, 0.8); /* campo do login */
    --zp-veu-cinza-borda: rgba(75, 85, 99, 0.3);
    --zp-veu-verde: rgba(37, 211, 102, 0.1);      /* item ativo, badge "conectado" */
    --zp-veu-verde-forte: rgba(37, 211, 102, 0.5);
    --zp-veu-erro: rgba(239, 68, 68, 0.1);
    --zp-veu-erro-borda: rgba(239, 68, 68, 0.3);

    /* ---------- Movimento ---------- */
    --zp-transicao: 150ms ease;
    --zp-transicao-lenta: 300ms ease;

    /* ---------- Layout ---------- */
    --zp-sidebar-largura: 240px;
}

/* Títulos na fonte do wordmark: é o que liga a interface ao logo. */
h1, h2, h3, h4, h5, h6,
.login-title,
.data-header h4,
.arq-lista-titulo h5,
.modal-title {
    font-family: var(--zp-fonte-titulo);
    letter-spacing: -0.01em;
}