:root {
  /* Base */
  --bg-color: #1A2026;
  --font-family: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Roboto", sans-serif;
  --font-family-alt: 'Product Sans', system-ui, "Roboto", sans-serif;
  --first_layer: ease;
  --scrollbar-width: 0px;

  /* Telegram Dark Surfaces */
  --surface-0: #1A2026;
  /* page bg (also sent to TWA header/bg) */
  --surface-1: #1B222B;
  /* panels/cards */
  --surface-2: #212A33;
  /* list rows, list containers */
  --surface-2-active: #26313C;
  /* active row */
  --surface-2-selected: #243040;
  /* selected row/menus */
  --surface-input: #1B222B;
  /* inputs, tags */
  --surface-contrast: #11161C;
  /* deep contrasts */

  /* Content */
  --text-primary: #E6EDF3;
  --text-secondary: #8794A1;
  --text-inverse: #FFFFFF;

  /* Accents / Links */
  --accent-primary: #2998FF;
  /* primary actions */
  --accent-secondary: #6AB3F3;
  /* confirmations / ticks */
  --link-color: #4DB2FF;

  /* Dividers & Strokes */
  --stroke-weak: rgba(255, 255, 255, 0.06);
  --stroke-mid: rgba(255, 255, 255, 0.08);

  /* Controls */
  --toggle-track: #2A3441;
}

html,
body {
  max-width: 100vw;
  user-select: none;

  &.noscroll {
    position: fixed;
    overflow-y: hidden;
    width: 100%;
    padding-right: var(--scrollbar-width);
  }
}

* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  background: var(--bg-color);
  padding-right: var(--scrollbar-width);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

.twaBody {
  height: 100vh;
  overflow: hidden;
  -webkit-text-size-adjust: none;
}

.twaBody * {
  -webkit-user-select: none;
  user-select: none;
}

.appLoader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--bg-color);
  z-index: 100;
  opacity: 1;
  will-change: transform;
  transform: translateZ(0);
  transition: opacity 0.3s var(--first_layer);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}