:root {
  --preto: #000000;
  --carvao: #161616;
  --grafite: #2a2a2a;
  --cinza: #8a8a8a;
  --papel: #f5f5f5;
  --branco: #ffffff;
  --tally: #e5322d; /* luz de gravação da câmera: o único acento */
  --fonte: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }

button {
  background: var(--carvao);
  border: 1px solid var(--grafite);
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button:active { background: var(--grafite); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--branco);
  outline-offset: 2px;
}

.marca {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.marca span { color: var(--cinza); font-weight: 400; }

.tally {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--grafite);
  vertical-align: middle;
}
.tally.ligado { background: var(--tally); box-shadow: 0 0 12px var(--tally); }
.tally.conectado { background: var(--branco); }

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