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

:root {
  --bg: #0b0c0e;
  --surface: #121418;
  --surface-hover: #181b20;
  --border: #222630;
  --border-bright: #2d3342;
  --text: #f0f2f5;
  --muted: #8a94a6;
  --error: #ff5555;
  --success: #3be28a;
  --warn: #ffb82e;
  --accent: #5ce6e6;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}

html,
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
}