/* G2TeK Demo — base visual comum (vitrine, Fábrica e telas da TV)
 * Manual de Identidade Visual v1.0: grafite e carvão, Verde Sinal só como acento,
 * Archivo para texto e títulos, IBM Plex Mono só para dado técnico (código, IP, hora, ID).
 * Flat: sem sombra decorativa, sem gradiente, sem brilho.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Paleta oficial */
  --g2-grafite: #14171D;
  --g2-grafite-2: #101318;   /* faixa da demo, rodapé */
  --g2-carvao: #1B2027;
  --g2-carvao-2: #222831;
  --g2-verde: #A3E635;
  --g2-verde-tinta: rgba(163, 230, 53, .10);
  --g2-papel: #F2F4EF;
  --g2-papel-2: #C9CFD6;
  --g2-cinza: #9AA3AD;
  --g2-cinza-fundo: #7A848F; /* contraste AA sobre grafite */
  --g2-linha: #262C35;
  --g2-linha-2: #323A45;

  /* Status (só em indicadores) */
  --ok: #A3E635;
  --alerta: #F5B83D;
  --critico: #F0524A;

  /* Tipografia */
  --g2-fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --g2-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --g2-track-mono: .04em;

  /* Escala (razão 1,25) */
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-25: 25px; --t-31: 31px; --t-39: 39px; --t-49: 49px;

  /* Nomes usados pelos módulos */
  --fundo: var(--g2-grafite);
  --painel: var(--g2-carvao);
  --painel-2: var(--g2-carvao-2);
  --borda: var(--g2-linha);
  --texto: var(--g2-papel);
  --suave: var(--g2-cinza);
  --marca: var(--g2-verde);
  --raio: 10px;
  --raio-sm: 6px;
  --fonte: var(--g2-fonte);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--g2-verde); color: var(--g2-grafite); }
:focus-visible { outline: 2px solid var(--g2-verde); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--g2-fonte); text-wrap: balance; }

/* Dado técnico: código, IP, hora, identificador */
.mono { font-family: var(--g2-mono); letter-spacing: var(--g2-track-mono); font-size: 13px; }

/* Rótulo de seção: frase curta, sem caixa-alta */
.eyebrow { font-size: 13px; font-weight: 600; color: var(--g2-cinza); letter-spacing: .01em; margin: 0; }
.eyebrow b { color: var(--g2-verde); font-weight: 600; }

/* Marca: wordmark oficial (fundo escuro = versão papel) */
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; }
.marca img { height: 20px; width: auto; display: block; }
.selo-demo {
  font-size: 12px; font-weight: 600; color: var(--g2-verde); line-height: 1;
  border: 1px solid rgba(163, 230, 53, .35); padding: 5px 8px; border-radius: 999px;
}

/* Indicador de status */
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--g2-cinza-fundo); }
.ponto.ok { background: var(--ok); }
.ponto.alerta { background: var(--alerta); }
.ponto.critico { background: var(--critico); animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: .35; } }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 8px;
  background: var(--g2-verde); color: var(--g2-grafite);
  font-family: var(--g2-fonte); font-size: 14.5px; font-weight: 650; letter-spacing: .005em;
  text-decoration: none; border: 1px solid var(--g2-verde); cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.botao:hover { background: #B4EE52; border-color: #B4EE52; }
.botao.secundario { background: transparent; color: var(--texto); border-color: var(--g2-linha-2); }
.botao.secundario:hover { border-color: var(--g2-cinza); background: var(--g2-carvao); }
.botao.pequeno { height: 34px; padding: 0 14px; font-size: 13.5px; }
.botao svg { flex: none; }

/* Cursor do wordmark G2TEK_ */
.cursor { color: var(--g2-verde); animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }

/* Ícones de traço (conjunto único, 24×24, traço 1,7) */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}