/*
  tokens.css — Propensiq Design System (ADR-050 / FUNCIONALIDADES_INICIAIS.docx)

  Fonte: Inter via Google Fonts CDN (<link> em templates/base.html), não
  self-hosted. Escolhido pela simplicidade operacional na fase de
  bootstrap — sem arquivo de fonte para versionar/atualizar manualmente
  no repositório. Revisitar self-hosting só se surgir requisito real de
  operação offline ou exigência de compliance de um cliente (ver
  ARCHITECTURE.md §7, mesmo raciocínio de não prometer garantia que a
  arquitetura atual não sustenta).

  Regra de uso das cores (não é só uma lista de variáveis):
  - Navy: estrutura e navegação — sidebar, menu, títulos de alta ênfase.
  - Teal: ação, seleção e destaque — botão primário, item de menu ativo,
    score em destaque. Usar com PARCIMÔNIA — teal não deve dominar a
    tela, é acento, não cor de fundo geral.
  - Slate / Light Slate: texto secundário, ícones auxiliares, bordas,
    estados desabilitados — informação de apoio, nunca estrutura nem
    ação.
  - Background / Bordas / Texto: neutros de interface (fundo de página,
    divisórias, texto de corpo).
*/

:root {
  --color-navy: #0D1B2A;
  --color-teal: #14B8A6;
  --color-slate: #64748B;
  --color-light-slate: #94A3B8;
  --color-background: #F8FAFC;
  --color-border: #E2E8F0;
  --color-text: #0F172A;
  --color-white: #FFFFFF;

  /* Extensão pontual (ADR-059, acabamento visual da Visão Geral,
     fidelidade ao mockup da Visão Geral (26/08/2026; fora do repositório desde 05/10/2026)): um quarto acento para
     diferenciar o ícone do card "Rankings gerados" dos demais - Navy/
     Teal já usados nos outros 3 ícones de estatística. Não é uma nova
     decisão de arquitetura de cor, só uma variação de badge de ícone;
     usar com a mesma parcimônia do Teal, não introduzir em texto/
     estrutura. Segundo uso (ADR-138, 11.3.17): o botão "Análise
     Profunda (IA)" (.button--analise), que gasta crédito e precisa de
     cor própria, distinta do primário teal. */
  --color-purple: #7C3AED;
  /* Fundo claro do mesmo roxo (pedido do cliente de 08/10/2026, adenda ao ADR-132): as linhas do ranking das empresas
     que já têm Análise Profunda (IA) pronta. Só fundo de linha e a amostra da legenda; o texto continua navy/texto. */
  --color-purple-bg: #EDE9FE;

  /* Extensão pontual (ADR-059, páginas estáticas "Como funciona"/
     "Segurança e privacidade" - fidelidade aos mockups docs/mockup
     saiba mais.png e docs/mockup seguranca.png): cor de alerta usada
     SÓ no banner "O que o Propensiq não faz" da página de segurança -
     conteúdo genuinamente de aviso/negação, não decorativo, então um
     tom neutro (Navy/Teal) não comunicaria a mesma coisa. Não usar em
     nenhum outro contexto sem necessidade equivalente. */
  --color-warning-bg: #FFF7ED;
  --color-warning-border: #FDBA74;
  --color-warning-icon: #EA580C;

  /* Extensão pontual (ADR-078, tela de Rankings): primeira mensagem de
     estado "sucesso" do app (confirmação de exclusão sem reload de
     página) - até aqui só existia tom de erro (#B42318 em
     .form-message, base.css). Mesmo espírito do --color-warning-*
     acima: cor de estado, não decorativa, não reutilizar fora de
     mensagens de confirmação de sucesso. */
  --color-success-bg: #F0FDF4;
  --color-success-border: #86EFAC;
  --color-success-text: #15803D;

  /* Extensão pontual (ADR-141, 11.3.17 parte B): o aviso "Faltam X dias de teste" do período de teste do cliente, em
     vermelho junto do usuário logado (decisão de Alexandre). Tom claro para ler sobre o navy da barra lateral. Não usar
     em outro contexto. */
  --color-danger-on-navy: #F87171;

  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Grid de referência: ARCHITECTURE.md/PRD.md não definiam isso —
     valor vem da especificação funcional (FUNCIONALIDADES_INICIAIS.docx),
     formalizado em ADR-050. Desktop-first, sem otimização mobile na v1.
     Largura mínima: 1280 px no ADR-050; JANELA de 1024 px desde o ADR-132 (a
     tela física de 1280 px com escala de 125% entrega 1024 px CSS). O token é a
     largura do CONTEÚDO: uma janela de 1024 px com a barra de rolagem vertical
     tem ~1007–1009 px úteis — com o token em 1024 ela rolava 15 px na
     horizontal (medido no portão; é o mesmo erro do L1 em 1280). 1000 px cobre
     uma barra de até 24 px. */
  --grid-reference-width: 1440px;
  --grid-min-width: 1000px;
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 72px; /* ADR-072, 01/09/2026 - sidebar colapsável */
}