/* =====================================================================
   R.A.M.A. — base
   ---------------------------------------------------------------------
   Reset curto, as @font-face locais, tipografia e o véu de CRT.

   Os arquivos da PixelMplus NÃO acompanham este repositório (a licença é
   do autor original). Enquanto eles não estiverem em assets/fonts/, o
   navegador cai na monoespaçada do sistema e o sistema continua inteiro
   — só perde a letra da identidade. Ver assets/fonts/LEIA-ME.md.
   ===================================================================== */

@font-face {
  font-family: "PixelMplus12";
  src: url("../assets/fonts/PixelMplus12-Regular.woff2") format("woff2"),
       url("../assets/fonts/PixelMplus12-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PixelMplus12";
  src: url("../assets/fonts/PixelMplus12-Bold.woff2") format("woff2"),
       url("../assets/fonts/PixelMplus12-Bold.ttf")   format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PixelMplus10";
  src: url("../assets/fonts/PixelMplus10-Regular.woff2") format("woff2"),
       url("../assets/fonts/PixelMplus10-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PixelMplus10";
  src: url("../assets/fonts/PixelMplus10-Bold.woff2") format("woff2"),
       url("../assets/fonts/PixelMplus10-Bold.ttf")   format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */

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

html {
  font-size: var(--texto-base);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--cor-traco-fraca) var(--cor-fundo);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cor-fundo);
  color: var(--cor-texto-2);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  line-height: var(--altura-linha);
  letter-spacing: var(--espaco-letra);
  /* a letra pixel não quer suavização: ela foi desenhada pixel a pixel */
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

a {
  color: var(--cor-texto);
  text-decoration: none;
  border-bottom: var(--borda) solid var(--cor-traco-fraca);
}
a:hover { border-bottom-color: var(--cor-traco-forte); }

/* ---------- foco ----------
   Um só desenho de foco no sistema inteiro: contorno branco por fora,
   sombra escura por dentro, para o anel aparecer tanto sobre o fundo
   quanto sobre uma caixa clara invertida. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cor-traco-forte);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--cor-fundo);
}

/* ---------- tipografia ---------- */

.t-titulo {
  font-weight: 700;
  font-size: var(--texto-grande);
  line-height: 1.25;
  letter-spacing: var(--espaco-letra-titulo);
  color: var(--cor-texto);
  text-transform: uppercase;
}

.t-secao {
  font-weight: 700;
  font-size: var(--texto-base);
  letter-spacing: var(--espaco-letra-titulo);
  color: var(--cor-texto);
  text-transform: uppercase;
}

.t-rotulo {
  font-family: var(--fonte-mini);
  font-size: var(--texto-mini);
  letter-spacing: var(--espaco-letra-titulo);
  color: var(--cor-texto-3);
  text-transform: uppercase;
}

.t-rotulo-forte { font-weight: 700; color: var(--cor-texto-2); }

.t-mini {
  font-family: var(--fonte-mini);
  font-size: var(--texto-mini);
  color: var(--cor-texto-3);
}

.t-numero {
  font-weight: 700;
  font-size: var(--texto-numero);
  line-height: 1;
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}

.t-fraco  { color: var(--cor-texto-3); }
.t-forte  { color: var(--cor-texto); font-weight: 700; }
.t-ok     { color: var(--cor-ok); }
.t-aviso  { color: var(--cor-aviso); }
.t-erro   { color: var(--cor-erro); }

/* A marca de ramificação: usada em rótulos curtos como NÓ // ATIVO.
   É detalhe de identidade, então nunca carrega informação sozinha. */
.t-no::after {
  content: " //";
  color: var(--cor-traco-fraca);
}

/* ---------- utilidades ---------- */

.oculto { display: none !important; }

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular-para {
  position: absolute;
  left: var(--e3);
  top: -100px;
  z-index: var(--z-aviso);
  padding: var(--e2) var(--e3);
  background: var(--cor-texto);
  color: var(--cor-fundo);
  border: var(--borda) solid var(--cor-traco-forte);
  transition: top var(--tempo-curto) var(--curva);
}
.pular-para:focus { top: var(--e3); }

/* ---------- véu de CRT ----------
   Duas camadas muito fracas: linhas horizontais e um brilho de canto.
   Fica atrás de tudo o que se lê e some para quem pediu menos efeito ou
   desligou no Perfil (data-efeitos="off" no <html>). */

.veu {
  position: fixed;
  inset: 0;
  z-index: var(--z-fixo);
  pointer-events: none;
}

.veu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0px,
    rgba(255, 255, 255, 0.022) 1px,
    transparent 1px,
    transparent 3px
  );
}

.veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

html[data-efeitos="off"] .veu { display: none; }

@media (prefers-reduced-motion: reduce) {
  .veu::before { opacity: 0.5; }
}

/* ---------- seleção de texto ---------- */
::selection {
  background: var(--cor-texto);
  color: var(--cor-fundo);
}

/* ---------- barra de rolagem ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cor-fundo); }
::-webkit-scrollbar-thumb {
  background: var(--cor-superficie-3);
  border: var(--borda) solid var(--cor-traco-fraca);
}
::-webkit-scrollbar-thumb:hover { background: var(--cor-traco-fraca); }