:root {
  --bg-base: #050608;
  --bg-surface: #0a0c0f;
  --bg-elevated: #10141a;
  --border: #1c2230;
  --border-bright: #2a3448;
  --text-primary: #e8edf5;
  --text-secondary: #7a8ba0;
  --text-dim: #3d4e63;
  --sovereign: #c4a35a;
  --signal-live: #00ff88;
  --signal-warn: #ffb800;
  --signal-alert: #ff3b3b;
  --signal-neutral: #4a6080;
  --phase-1: #ff6b35;
  --phase-2: #ffb800;
  --phase-3: #4a6080;
  --phase-4: #00c4ff;
  --phase-5: #ff3b3b;
  --font-display: "JetBrains Mono", monospace;
  --font-label: "IBM Plex Mono", monospace;
  --font-body: "IBM Plex Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.035) 2px,
    rgba(0, 0, 0, 0.035) 4px
  );
}

button {
  font: inherit;
}

.mono {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.dim {
  color: var(--text-dim);
}

.small {
  font-size: 11px;
  margin-left: 8px;
}

.gold {
  color: var(--sovereign);
}

.green {
  color: var(--signal-live);
}

.red {
  color: var(--signal-alert);
}