:root {
  --bg: #0f1419;
  --surface: #1a2332;
  --surface-2: #243044;
  --text: #e8edf4;
  --text-dim: #8b9cb3;
  --accent: #4da3ff;
  --green: #3dd68c;
  --yellow: #f5c542;
  --red: #ff6b6b;
  --purple: #b794f6;
  --orange: #f59e42;
  --blue: #5b9bd5;
  --border: #2d3a4f;
  --tab-height: 56px;
  --header-height: 48px;
  --rating-no-data: #5b9bd5;
  --rating-low: #b794f6;
  --rating-good: #3dd68c;
  --rating-elevated: #f59e42;
  --rating-high: #ff6b6b;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  /* Keep all vertical scrolling inside #app-main (see presence overlay). */
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0));
}