.environment-banner {
  position: relative;
  z-index: 10001;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  border-bottom: 1px solid transparent;
  font: 700 0.82rem/1.35 Inter, system-ui, sans-serif;
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: uppercase;
}

.environment-banner[hidden] {
  display: none;
}

.environment-banner[data-tone="production"] {
  color: #d1fae5;
  background: #064e3b;
  border-color: #10b981;
}

.environment-banner[data-tone="acceptance"] {
  color: #422006;
  background: #fbbf24;
  border-color: #d97706;
}

.environment-banner[data-tone="test"],
.environment-banner[data-tone="development"] {
  color: #eff6ff;
  background: #1d4ed8;
  border-color: #60a5fa;
}

.environment-banner[data-tone="unknown"] {
  color: #fff7ed;
  background: #991b1b;
  border-color: #ef4444;
}