/* Colours come from the Telegram theme (the --tg-theme-* variables Telegram's script sets), so the app
   matches the user's light or dark Telegram. The fallbacks are for a plain browser. */

:root {
  color-scheme: light dark;
  --fallback-bg: #f2f3f5;
  --fallback-surface: #ffffff;
  --fallback-text: #1f2430;
  --fallback-hint: #8a8f98;
  --fallback-accent: #3390ec;
  --fallback-accent-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fallback-bg: #17181c;
    --fallback-surface: #212329;
    --fallback-text: #f1f2f4;
    --fallback-hint: #8e939c;
    --fallback-accent: #5ea8f2;
    --fallback-accent-text: #ffffff;
  }
}

:root {
  --bg: var(--tg-theme-secondary-bg-color, var(--fallback-bg));
  --surface: var(--tg-theme-bg-color, var(--fallback-surface));
  --text: var(--tg-theme-text-color, var(--fallback-text));
  --hint: var(--tg-theme-hint-color, var(--fallback-hint));
  --accent: var(--tg-theme-button-color, var(--fallback-accent));
  --accent-text: var(--tg-theme-button-text-color, var(--fallback-accent-text));
  --radius: 20px;
  --gutter: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 4px 0;
}

.hint {
  color: var(--hint);
}

/* The hello screen: one card in the middle */
.hello {
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100dvh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 var(--gutter);
  padding: 32px 24px;
  text-align: center;
}

.hello > * {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}