/* ==========================================================================
   MISSÃO — Design System Conceitual · tokens compartilhados
   Estudo independente. NÃO substitui manual oficial de marca do Partido Missão.
   Amarelo #FCBE26 medido no site missao.org.br em 14/10/2026 (não homologado).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Cor */
  --amarelo: #FCBE26;
  --amarelo-escuro: #E0A300;     /* hover / texto amarelo sobre branco: evitar, usar só em ícones grandes */
  --amarelo-claro: #FFF4D1;      /* fundos de destaque suave */
  --preto: #1A1A1A;
  --grafite: #2B2B2B;
  --grafite-2: #2E2E2E;
  --cinza: #545454;
  --cinza-2: #6B6B6B;
  --linha: #D9D6CF;
  --cinza-claro: #F5F3EE;
  --cinza-claro-2: #EDEDED;
  --branco: #FFFFFF;
  /* Estados (uso funcional, nunca decorativo) */
  --ok: #17744A;
  --alerta: #C77700;
  --critico: #C2362B;
  --info: #2F5FD0;

  /* Tipografia */
  --f-titulo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-texto: 'Public Sans', 'Segoe UI', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', Consolas, monospace;

  /* Espaçamento (base 4) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --raio-s: 6px; --raio-m: 10px; --raio-l: 16px; --raio-xl: 28px;
  --fio: 1px solid var(--linha);
}

/* Textura de rosetas abstratas (inspiração na pelagem da onça, não é o símbolo oficial) */
.textura-onca {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23FCBE26'%3E%3Cpath d='M40 22c7-3 14 1 15 7s-4 9-10 9-11-2-12-7 1-7 7-9z'/%3E%3Cpath d='M62 40c5 1 8 6 6 11s-7 6-10 3-3-9 0-12 2-2 4-2z'/%3E%3Cpath d='M45 62c5-2 10 1 10 5s-4 7-9 7-9-3-8-7 3-4 7-5z'/%3E%3Cpath d='M22 50c4-3 9-2 10 2s-1 9-6 10-8-2-8-6 1-4 4-6z'/%3E%3Cpath d='M24 28c3-1 6 1 6 4s-3 6-6 6-5-2-4-5 2-4 4-5z'/%3E%3Cpath d='M128 100c6-2 12 1 12 6s-4 8-9 8-10-3-9-7 2-5 6-7z'/%3E%3Cpath d='M148 118c4 1 7 5 5 9s-6 5-9 2-2-8 0-10 2-1 4-1z'/%3E%3Cpath d='M132 136c4-2 9 0 9 4s-3 7-8 7-8-3-7-6 2-4 6-5z'/%3E%3Cpath d='M112 122c3-3 8-2 9 2s-1 8-5 9-7-2-7-5 1-4 3-6z'/%3E%3Cpath d='M150 30c3 0 6 3 5 6s-4 4-6 2-3-6-1-7 1-1 2-1z'/%3E%3Cpath d='M86 150c4-1 7 2 6 5s-4 5-7 4-4-4-2-6 2-3 3-3z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Selo de status — obrigatório em capas e rodapés (caixa de frase, sem espaçamento largo) */
.selo {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1.2 var(--f-texto); letter-spacing: 0;
  padding: 7px 11px; border: 1.5px solid currentColor; border-radius: 999px;
}
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.tag {
  display: inline-block; font: 600 11px/1.2 var(--f-texto); letter-spacing: 0;
  padding: 3px 8px; border-radius: 4px; background: var(--cinza-claro); color: var(--grafite); white-space: nowrap;
}
.tag.am { background: var(--amarelo); color: var(--preto); }
.tag.pr { background: var(--preto); color: var(--branco); }
.tag.ok { background: #E3F0E8; color: var(--ok); }
.tag.al { background: #FBEBD3; color: #8A5300; }
.tag.cr { background: #F6DEDB; color: #A12A20; }
.tag.ficticio { background: transparent; border: 1px dashed var(--cinza-2); color: var(--cinza); }

/* Marca-texto: o único uso de amarelo no miolo dos documentos */
.grifo { background-color: var(--amarelo); color: var(--preto); padding: .04em .14em; border-radius: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }