:root {
  --beacon-ink: #0B0F17;
  --beacon-navy: #121926;
  --beacon-slate: #1F2837;
  --beacon-cream: #F5EEDC;
  --beacon-stone: #EFE6D2;
  --beacon-paper: #FFFCF4;
  --beacon-gold: #E8B24D;
  --beacon-coral: #FF6B5E;
  --beacon-mint: #22D3A6;
  --beacon-blue: #3B82F6;
  --beacon-line: rgba(11, 15, 23, 0.12);
  --beacon-serif: "Playfair Display", Georgia, serif;
  --beacon-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --beacon-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.beacon-focus:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(232, 178, 77, 0.42);
  outline-offset: 3px;
}

.beacon-status-on {
  color: #0F6B54;
  background: rgba(34, 211, 166, 0.14);
  border: 1px solid rgba(34, 211, 166, 0.28);
}

.beacon-status-off {
  color: #B63D33;
  background: rgba(255, 107, 94, 0.13);
  border: 1px solid rgba(255, 107, 94, 0.25);
}

.beacon-status-unknown {
  color: rgba(11, 15, 23, 0.58);
  background: rgba(11, 15, 23, 0.05);
  border: 1px solid rgba(11, 15, 23, 0.12);
}