/**
 * Sistema de design CooperManga — Fase 1 (base compartilhada)
 * =============================================================
 * Criado a partir da nova direção visual aprovada (referências de estilo em
 * imagem geradas por IA — painel de diretoria, home institucional multi-página
 * e folha de especificação de marca). As cores exatas usadas nessas imagens de
 * referência são inválidas/inventadas (hex que não existem, ex: "#ex4050") —
 * as cores reais abaixo foram extraídas diretamente do arquivo oficial da
 * logomarca (assets/logo/coopermanga_logo.png), não das imagens de referência.
 *
 * Este arquivo é só a BASE (tokens + componentes reutilizáveis). Nenhuma
 * página existente do site/painel foi alterada nesta fase — a aplicação vem
 * nas Fases 2 (painel) e 3 (site institucional), em prompts separados.
 *
 * Como usar num arquivo novo/existente (a partir da Fase 2 em diante):
 *   <link rel="stylesheet" href="[caminho-relativo]/assets/css/design-system.css">
 * Mesmo padrão de arquivo compartilhado já usado pra JS neste projeto
 * (ver diretoria/shared/talhao-form.js) — sem build tool, é só um <link>.
 *
 * Todas as classes daqui usam o prefixo "cm-" (CooperManga) pra não colidir
 * com nomes de classe já usados dentro do <style> inline de cada página.
 */

:root{
  /* ---------- Paleta de marca — atualizada pra nova identidade aprovada
     (repaginação visual, processo tela-por-tela) — mesmos nomes de token de
     sempre, só valor novo, pra não quebrar nenhum arquivo que já consome
     essas variáveis. ---------- */
  --verde-marca:#1E5A0B;
  --verde-marca-escuro:#173D00;      /* hover/contraste — confirmado com o usuário
                                         que é o mesmo token de sempre, só valor novo */
  --laranja-marca:#F3790A;
  --laranja-marca-escuro:#D9720F;    /* sem valor novo definido na nova identidade —
                                         mantido no tom já usado (login, gráfico comercial) */
  --amarelo-marca:#FFB800;           /* (novo) */

  /* ---------- Neutros ---------- */
  --bg:#F5F4EF;
  --bg-alt:#ECEAE4;
  --ink:#2C3531;
  --muted:#8A8F89;
  --muted-2:#B3B7AF;                 /* (novo) */
  --line:#F1F1EE;
  --white:#FFFFFF;

  /* ---------- Tints — (novo) ---------- */
  --verde-tint:#EAF2E4;
  --laranja-tint:#FFF3E2;

  /* ---------- Vermelho de status (Fase 1 — consolidação de design) ---------- */
  /* Auditoria encontrou 3 vermelhos concorrentes: #C62828 (já usado nos pills
     de status "atrasado"/crítico em 10+ arquivos), #E1391B (--accent, usado
     como cor de interação geral — botão/foco/hover — em 50+ lugares, SEM
     relação com status) e #B92B10 (--accent-dark, hover do anterior).
     Escolhido #C62828 como --vermelho-status: já carregava o significado
     certo na maioria dos usos, e tem contraste melhor contra branco que
     #E1391B (checado via WCAG: #C62828 ≈ 5.78:1, #E1391B ≈ 4.39:1— este
     último fica ABAIXO do mínimo de 4.5:1 pra texto normal). #B92B10 vira
     --vermelho-status-escuro (reaproveitado, não é cor nova) — mesma função
     de contraste/hover que já tinha antes.
     Reservado só pra status crítico/erro/atraso — nunca pra botão ou
     decoração (esse papel era do extinto --acento-interativo — ver Fase 2
     abaixo, ele não existe mais). */
  --vermelho-status:#C62828;
  --vermelho-status-escuro:#B92B10;

  /* ---------- Fase 2 — fim do --acento-interativo, dominância verde/laranja ---------- */
  /* A Fase 1 tinha isolado --acento-interativo/-escuro (#E1391B/#B92B10) como
     "cor de interação geral" (botão primário, anel de foco, hover de nav) —
     só pra deixar claro que não era o vermelho de status, mas ainda era
     vermelho, contrariando a identidade real da marca (verde+laranja, sem
     vermelho como cor de ação). A Fase 2 REMOVEU esse token por completo e
     dividiu os mais de 50 usos por função, já usando os tokens que já
     existiam acima:
       - Ações primárias (botão, CTA)      -> --laranja-marca / -escuro
       - Navegação/seleção (nav ativa,      -> --verde-marca / -escuro
         foco de input, breadcrumb, filtro,
         paginação, anel de foco)
       - Números de KPI/resumo              -> --laranja-marca-escuro
         (a Fase 2 mudou pra clara, mas a correção de contraste logo em
         seguida trocou pra escura — ver notas de contraste abaixo)
     Nenhum token novo foi criado — só reaproveitado o que já existia.

     Correção de contraste (rodada seguinte): botão primário laranja com
     texto branco (.cm-btn-primario e equivalentes) só chegava a ≈2,80:1 —
     abaixo até do mínimo de texto grande. Fundo continua --laranja-marca
     (não escurece, é a cor mais reconhecível da logo); o texto virou
     --ink (≈6,44:1, passa 4,5:1 com folga) em vez de branco. */

  /* ---------- Cores de status (pills verde/âmbar/vermelho) ---------- */
  /* Antes hex cru copiado em 10+ arquivos (mensalidades, quota-parte,
     previsibilidade, cooperados, logística). Valores inalterados, só
     centralizados aqui. */
  --status-ok-bg:#E4F3E5;
  --status-ok-texto:#2E7D32;
  --status-atencao-bg:#FDF1DC;
  --status-atencao-texto:#B9750B;
  --status-critico-bg:#FBEAE7;
  --status-critico-texto:var(--vermelho-status);

  /* ---------- Tipografia — Manrope em título e corpo (nova identidade
     aprovada), substituindo Fraunces+Inter. Pesos 400/500/600/700/800
     carregados via <link> do Google Fonts em cada página (ver comentário em
     cada arquivo alterado). ---------- */
  --fonte-titulo:"Manrope", sans-serif;
  --fonte-corpo:"Manrope", sans-serif;

  /* ---------- Espaçamento/raio/sombra ---------- */
  --cm-raio-card:20px;
  --cm-raio-botao:10px;
  --cm-sombra-card: 0 1px 2px rgba(44,53,49,0.05);  /* (novo) */
}

/* =============================================================
   2. CARD — padrão visual novo (referência: imagem do painel)
   Cantos arredondados, borda fina verde em vez de sombra pesada, fundo
   branco, ícone no topo + título + texto descritivo, espaçamento generoso.
   ============================================================= */
.cm-card{
  background:var(--white);
  /* Nova identidade: sombra em vez de borda (--cm-sombra-card). Este
     arquivo é compartilhado com o site institucional público (contato.html
     usa .cm-card sem sobrescrever nada). Páginas de diretoria/* que ainda
     sobrescrevem a borda localmente pra --ink 2px (tratamento antigo) serão
     revisadas uma a uma no processo de repaginação tela-por-tela — não
     mexidas aqui. */
  border:none;
  box-shadow:var(--cm-sombra-card);
  border-radius:var(--cm-raio-card);
  padding:28px 26px;
}
.cm-card-icon{
  width:40px;
  height:40px;
  display:block;
  margin-bottom:16px;
}
.cm-card-titulo{
  font-family:var(--fonte-titulo);
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  margin:0 0 8px;
  letter-spacing:-0.01em;
}
.cm-card-texto{
  font-family:var(--fonte-corpo);
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

/* =============================================================
   5. TIPOGRAFIA — utilitários de peso/tamanho pra títulos
   A referência não troca fonte, só pede títulos mais bold/grandes em alguns
   lugares. Utilitários prontos pra Fase 2/3 aplicarem onde fizer sentido —
   nenhum título de página existente foi alterado por aqui.
   ============================================================= */
.cm-titulo-display{
  font-family:var(--fonte-titulo);
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.cm-titulo-secao{
  font-family:var(--fonte-titulo);
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
}

/* =============================================================
   6. BOTÕES
   ============================================================= */
.cm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--fonte-corpo);
  font-weight:700;
  font-size:14px;
  padding:12px 24px;
  border-radius:var(--cm-raio-botao);
  cursor:pointer;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cm-btn-primario{
  background:var(--laranja-marca);
  /* Texto --ink (não branco): #FD7000 x branco só chega a ≈2,80:1, abaixo
     até do mínimo de 3:1 pra texto grande — ver comentário de contraste
     no bloco de :root acima. #FD7000 x --ink (#181614) chega a ≈6,44:1,
     passa 4,5:1 (texto normal) com folga. Fundo continua laranja puro,
     sem escurecer — só o texto mudou. */
  color:var(--ink);
}
.cm-btn-primario:hover{ background:var(--laranja-marca-escuro); }

.cm-btn-secundario{
  background:transparent;
  color:var(--verde-marca);
  border-color:var(--verde-marca);
}
.cm-btn-secundario:hover{ background:rgba(46,106,0,.08); }

/* =============================================================
   4. PADRÃO DECORATIVO (manga + pessoas)
   Asset em assets/patterns/padrao-manga-pessoas.svg — tile de 120x120,
   repetível, com opacidade já reduzida dentro do próprio SVG (uso como
   textura de fundo). Classe pronta pra aplicar em qualquer seção:
   ============================================================= */
.cm-textura-fundo{
  background-image:url('../patterns/padrao-manga-pessoas.svg');
  background-repeat:repeat;
  background-size:120px 120px;
}

/* =============================================================
   7. NOME DE COOPERADO EM LISTAGEM/TABELA
   Padrão único pra qualquer tela que exiba nomes de cooperados em lista ou
   tabela (cadastro, financeiro, previsibilidade, logística). Substitui as
   duas versões divergentes de ".link-cooperado" que existiam antes (uma em
   mensalidades.html com peso 700 vindo por acidente do <th> pai, outra em
   comercial.html com peso 600 duplicado localmente). Tamanho de fonte
   continua sendo definido por cada tela — não padronizado aqui.
   ============================================================= */
.nome-cooperado{
  font-family:var(--fonte-corpo);
  font-weight:600;
  color:var(--ink);
}
.nome-cooperado-link{
  font-family:var(--fonte-corpo);
  font-weight:600;
  color:var(--verde-marca);
  text-decoration:none;
}
.nome-cooperado-link:hover{
  text-decoration:underline;
}