/* ==========================================================================
   Compra Automatizada — Design Tokens
   Camada unica de variaveis. Mexer aqui repinta o sistema inteiro sem tocar
   em nenhum componente. Aplicacao dos tokens: /css/custom-theme.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {

  /* ---------- Tipografia ---------- */
  /* Inter tem numerais tabulares e melhor leitura em tabela densa.
     Para voltar ao antigo, troque apenas esta linha por "Montserrat". */
  --font-sistema: "Inter";
  --font-titulo: "Inter";

  --texto-xs: 0.75rem;      /* 12px - legendas, hints */
  --texto-sm: 0.8125rem;    /* 13px - tabelas, labels */
  --texto-base: 0.875rem;   /* 14px - corpo */
  --texto-md: 1rem;         /* 16px - destaque */
  --texto-lg: 1.25rem;      /* 20px - titulo de secao */
  --texto-xl: 1.5rem;       /* 24px - titulo de pagina */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  /* ---------- Espacamento (ritmo de 4px) ---------- */
  --esp-1: 0.25rem;   /* 4  */
  --esp-2: 0.5rem;    /* 8  */
  --esp-3: 0.75rem;   /* 12 */
  --esp-4: 1rem;      /* 16 */
  --esp-5: 1.5rem;    /* 24 */
  --esp-6: 2rem;      /* 32 */
  --esp-7: 3rem;      /* 48 */

  /* ---------- Raio ---------- */
  --raio-sm: 6px;
  --raio-md: 8px;
  --raio-lg: 12px;
  --raio-full: 999px;

  /* ---------- Sombras (suaves e em camadas) ---------- */
  --sombra-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --sombra-md: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --sombra-lg: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --sombra-modal: 0 20px 40px -8px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.10);

  /* ---------- Paleta primaria: Marinho Corporativo ----------
     Azul e a cor menos polarizada por genero e a mais associada a
     instituicao financeira. Usada em marca, navegacao e acao primaria. */  
   --primaria-50: #F3F6FA;
   --primaria-100: #E7EDF5;
   --primaria-200: #CFDAE9;
   --primaria-300: #A9BCD3;
   --primaria-400: #7895B7;
   --primaria-500: #58799F;
   --primaria-600: #456486;
   --primaria-700: #38516E;
   --primaria-800: #30445B;
   --primaria-900: #29394C;
   --primaria-950: #1D2B3A;

  /* ---------- Cor de acao (conversao) ----------
     Laranja. REGRA: no maximo um botao laranja por tela, sempre o de maior
     valor (Convidar, Enviar Cotacao, Aprovar OC). Se aparecer em dois lugares
     perde o efeito e passa a competir com o amarelo de "pendente".
     Use a classe .btn-acao — nunca color="primary". */
  /* #EA580C (o laranja da proposta) da apenas 3.56:1 com texto branco e
     reprova no WCAG AA para texto de 14px. #C2410C da 5.18:1 e mantem o
     mesmo peso visual de laranja quente. */
  /* --cor-acao: #C2410C;
  --cor-acao-hover: #9A3412;
  --cor-acao-letra: #FFFFFF;
  --cor-acao-fundo: #FFEDD5;
  --cor-acao-borda: #FED7AA; */
  --cor-acao: #16845B;
  --cor-acao-hover: #116B49;
  --cor-acao-letra: #FFFFFF;
  --cor-acao-fundo: #ECFDF5;
  --cor-acao-borda: #A7F3D0;

  /* ---------- Neutros ---------- */
  --neutro-50: #F8FAFC;
  --neutro-100: #F1F5F9;
  --neutro-200: #E2E8F0;
  --neutro-300: #CBD5E1;
  --neutro-400: #94A3B8;
  --neutro-500: #64748B;
  --neutro-600: #475569;
  --neutro-700: #334155;
  --neutro-800: #1E293B;
  --neutro-900: #0F172A;

  /* ---------- Cores semanticas (tonais: fundo claro + texto escuro) ---------- */
  --cor-sucesso: #047857;
  --cor-sucesso-fundo: #D1FAE5;
  --cor-sucesso-borda: #A7F3D0;

  /* Puxado para o amarelo (e nao para o ambar) de proposito: precisa ficar
     visivelmente diferente do laranja de acao. */
  --cor-alerta: #A16207;
  --cor-alerta-fundo: #FEF9C3;
  --cor-alerta-borda: #FEF08A;

  --cor-erro: #B91C1C;
  --cor-erro-fundo: #FEE2E2;
  --cor-erro-borda: #FECACA;

  --cor-info: #0369A1;
  --cor-info-fundo: #E0F2FE;
  --cor-info-borda: #BAE6FD;

  /* ---------- Texto ---------- */
  --cor-texto: var(--neutro-800);
  --cor-texto-suave: var(--neutro-500);
  --cor-texto-fraco: var(--neutro-400);
  --cor-texto-inverso: #FFFFFF;

  /* ---------- Superficies e bordas ---------- */
  --cor-base-fundo: var(--neutro-50);
  --cor-superficie: #FFFFFF;
  --cor-superficie-suave: var(--neutro-100);
  --cor-borda: var(--neutro-200);
  --cor-borda-forte: var(--neutro-300);

  /* ======================================================================
     Nomes legados — mantidos porque style.css e as telas já os referenciam.
     Agora apontam para a paleta acima, então tudo muda junto.
     ====================================================================== */

  /* Menu */
  --cor-menu-fundo: var(--cor-superficie);
  --cor-menu-letra: var(--neutro-600);
  --cor-menu-icone: var(--neutro-500);

  --cor-menu-fundo-selecionado: var(--primaria-50);
  --cor-menu-letra-selecionado: var(--primaria-800);
  --cor-menu-icone-selecionado: var(--primaria-700);

  /* Título do menu */
  --cor-menu-principal-letra: var(--neutro-400);
  --cor-menu-principal-fundo: transparent;

  /* Topo */
  --cor-topo-fundo: var(--primaria-900);
  --cor-topo-letra: #FFFFFF;

  /* Rodapé do menu */
  --cor-menu-rodape-fundo: var(--neutro-100);
  --cor-menu-rodape-letra: var(--neutro-600);

  /* Botão primário */
  --cor-btn-primary-fundo: var(--primaria-700);
  --cor-btn-primary-borda: var(--primaria-700);
  --cor-btn-primary-letra: #FFFFFF;

  --cor-btn-primary-fundo-selecionado: var(--primaria-800);
  --cor-btn-primary-borda-selecionado: var(--primaria-800);
  --cor-btn-primary-letra-selecionado: #FFFFFF;

  /* Dropzone */
  --cor-dropzone-fundo: var(--primaria-50);
  --cor-dropzone-letra: var(--neutro-500);
  --cor-dropzone-borda: var(--primaria-300);

  /* Login */
  --cor-backgroud-login: rgba(15, 44, 92, 0.55);

  --bs-gutter-x: 0.5rem !important;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}