/* Contew · base comum a todos os formulários
   Cores e fontes oficiais (identidade/identidade.txt).
   Cada formulário troca só a cor de destaque: <body data-cor="amarelo|verde|azul|vermelho|roxo"> */

@font-face {
  font-family: "Monigue";
  src: url("../fonts/Monigue.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Paleta oficial */
  --amarelo: #F2FF01;
  --verde: #00F864;
  --roxo: #773CDE;
  --azul: #2FBAFF;
  --vermelho: #FF002F;
  --cinza: #B5B5B5;
  --branco: #FFFFFF;
  --preto: #0C0C0C;

  /* Papéis */
  --fundo: var(--preto);
  --texto: var(--branco);
  --texto-apoio: var(--cinza);
  --destaque: var(--amarelo);
  --sobre-destaque: var(--preto);

  /* Tipografia: títulos e subtítulos Monigue, texto Inter */
  --fonte-titulo: "Monigue", "Impact", "Arial Narrow", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body[data-cor="amarelo"]  { --destaque: var(--amarelo); }
body[data-cor="verde"]    { --destaque: var(--verde); }
body[data-cor="azul"]     { --destaque: var(--azul); }
body[data-cor="vermelho"] { --destaque: var(--vermelho); --sobre-destaque: var(--branco); }
body[data-cor="roxo"]     { --destaque: var(--roxo); --sobre-destaque: var(--branco); }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: normal;
  line-height: 1.05;
}
.subtitulo {
  font-family: var(--fonte-titulo);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Logo branco com fundo transparente, pintado com a cor de destaque */
.logo, .simbolo {
  display: inline-block;
  background: var(--destaque);
  -webkit-mask: var(--img) center / contain no-repeat;
  mask: var(--img) center / contain no-repeat;
}
.logo    { --img: url("../img/logo-contew.png");    aspect-ratio: 1200 / 222; }
.simbolo { --img: url("../img/simbolo-contew.png"); aspect-ratio: 400 / 349; }