html {
  color-scheme: light dark;
  background-color: #f2f3f5;
}

html.dark {
  color-scheme: dark;
  background-color: #0d0d0f;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: inherit;
  color: #0d0d0f;
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html.dark body {
  color: #ececf0;
}

/* En iOS `black-translucent` vuelve transparente la status bar e ignora
   theme-color. Esta capa pinta solo la safe area; el navbar empieza debajo. */
html.pwa-standalone body::before {
  content: '';
  position: fixed;
  z-index: 2147483647;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background-color: var(--pwa-status-bar-color, #6c5ce7);
  pointer-events: none;
}

html.pwa-standalone body {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
}

html.pwa-standalone #root {
  min-height: calc(100vh - env(safe-area-inset-top, 0px));
  min-height: calc(100dvh - env(safe-area-inset-top, 0px));
}