/* Design System DevSecOps Pointer v1.0 — tema GitLab. Tokens: assets/tokens.json (marca/tokens.json). */
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fontes/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fontes/urbanist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fontes/jetbrainsmono-latin.woff2") format("woff2"); }

:root {
  --azul-700: #00056D; --azul-500: #1444D3; --magenta-500: #E52C91; --magenta-claro: #FF7BC0;
  --ciano-400: #58C7ED; --teal-500: #58AAAA; --grafite-900: #0E0F0F; --navy-800: #1B1F2C;
  --offwhite-50: #F7F7F7; --borda-200: #E5E7EB; --texto-secundario: #4A4F5C; --texto-terciario: #6B7280;
  --texto-sobre-escuro: #C9D3F2; --texto-terciario-escuro: #9FB0DE; --tonal-azul: #E8EDFB; --tonal-ciano: #E8F7FD;
  --tonal-teal: #E3F2F2; --teal-escuro: #1E5E5E; --tonal-magenta: #FDECF4;
  --branco: #FFFFFF; --parceiro-acento: #FC6D26; --link: #7759C2; --link-escuro: #A989C2;
  --fonte: Urbanist, Aptos, Calibri, Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

/* Estados de validação (texto + símbolo; cor nunca é o único portador) */
.estado { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 500;
  font-size: .78em; letter-spacing: .02em; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
  border: 1px solid transparent; }
.estado::before { font-family: var(--fonte); font-weight: 700; }
.estado.validado { background: var(--tonal-teal); color: var(--teal-escuro); }
.estado.validado::before { content: "●"; }
.estado.topologia-validada { background: var(--tonal-azul); color: var(--azul-700); }
.estado.topologia-validada::before { content: "◐"; }
.estado.sob-consulta { background: var(--offwhite-50); color: var(--texto-secundario); border-color: var(--borda-200); }
.estado.sob-consulta::before { content: "○"; }
.estado.roadmap { background: var(--branco); color: var(--texto-terciario); border: 1px dashed var(--texto-terciario); }
.estado.roadmap::before { content: "◌"; }
.estado.ofertado { background: var(--tonal-azul); color: var(--azul-700); }
.estado.ofertado::before { content: "●"; }

/* Classificação de recursos: ● nativo · ◐ requer configuração · ○ integração externa */
.classe { font-weight: 600; white-space: nowrap; }
.classe.nativo::before { content: "● "; }
.classe.configuracao::before { content: "◐ "; }
.classe.integracao::before { content: "○ "; }

/* Tratamento na matriz de migração */
.trat { display: inline-block; font-family: var(--mono); font-size: .76em; border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.trat.nativo { background: var(--tonal-teal); color: var(--teal-escuro); }
.trat.pipeline { background: var(--tonal-azul); color: var(--azul-700); }
.trat.manual { background: var(--tonal-ciano); color: var(--navy-800); border: 1px solid var(--ciano-400); }
.trat.nao-migra { background: var(--offwhite-50); color: var(--texto-secundario); border: 1px solid var(--borda-200); }
.estado.disponivel { background: var(--tonal-teal); color: var(--teal-escuro); }
.estado.disponivel::before { content: "●"; }